使用TypeScript创建react项目-1

1.node，和npm 这是最基础的，node的版本最好是比较新的，能支持npx。

2.使用npm全局安装下create-app-react 脚手架：

 npm install -g create-react-app

3.命令行创建TypeScript项目：

 npx create-react-app my-app --template typescript

4.添加项目关于webpack扩展：

这里使用yarn来安装 customize-cra，react-app-rewired，我再本地使用npm安装一直提示失败。

yarn add customize-cra react-app-rewired --dev

4.1 配置less

npm install less [email protected]  --save-dev

5.更改package.json中的scripts配置，修改如下：

"scripts": {

  "start": "react-app-rewired start",

  "build": "react-app-rewired build",

  "test": "react-app-rewired test"

}

6.新建 config-overrides.js 文件

在 package.json 同级目录下新建 config-overrides.js 文件

const {
    override,
    addDecoratorsLegacy,
    disableEsLint,
    addWebpackAlias,
    fixBabelImports,
    addLessLoader
} = require("customize-cra")
const path = require("path")

module.exports = override(
    // 添加装饰器
    addDecoratorsLegacy(),

    disableEsLint(),

    // 设置路径别名
    addWebpackAlias({
        '@': path.resolve(__dirname, 'src'),
    }),

    // 按需加载
    fixBabelImports("import", {
        libraryName: "antd", 
        libraryDirectory: "es", 
        style: true 
      }),
    
    // 配置less
    addLessLoader({  
        javascriptEnabled: true,
        ModifyVars: {'@primary-color': '#1DA57A'}, 
        sourceMap:false,
      }),
);

这里需要注意如果你改完config-overrides.js 之后npm start 启动项目报 Error: Cannot find module '@babel/plugin-proposal-decorators' 这个错误是因为缺少这个依赖 安装

npm install --save-dev @babel/plugin-proposal-decorators

7.配置路径别名

更目录新建tsconfig.path.json

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "@/*": ["./src/*"]
        }
    }
}

在tsconfig.json中引入

"extends": "./tsconfig.path.json",

8.npm start 启动项目

npmstart.png