react-library-learn

ts-loader 编译的时候可以进行类型检查, 新项目使用 2. babel-loader @/babel/preset-typescript 不能进行检查,旧项目一般使用

Usage no npm install needed!

<script type="module">
  import reactLibraryLearn from 'https://cdn.skypack.dev/react-library-learn';
</script>

README

ts的编译

  1. ts-loader 编译的时候可以进行类型检查, 新项目使用
  2. babel-loader @/babel/preset-typescript 不能进行检查,旧项目一般使用

ts-loader的配置

  1. ts-loader 依赖 typescritp: npm i typescript -D,执行npm run start,提示 The 'files' list in config file 'tsconfig.json' is empty.
  2. 执行tsc --init
  3. 执行npm i @types/react @types/react-dom -S
  4. 提示 Cannot use JSX unless the '--jsx' flag is provided,修改tsconfig.json的jsx属性的值为"react" preserve 保留jsx语法和tsx后续 react-native 保留jsx语法但会把后缀改为js react 不保留jsx语法直接编译成es5.后缀改为js
{
    test: /\.tsx | \.js?$/,
    use: 'ts-loader',
    exclude: /node_modules/
}

ts-loader也可以处理js文件

  • 入口文件改成js文件也可以正常运行 要明白ts-loader做了哪些事 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

tsconfig.json配置

如果tsx文件要引入js文件写的组件,需要将"allowJs"属性设置成true

eslint配置

  • 没有配置前,有错误提示,但是不影响运行

eslint的安装和配置

npm i eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser -D