react+typescript+less+本地代理项目搭建

前置：

ps:版本最好差别不要太大，不同版本可能导致不同的问题,这个很重要！很重要！很重要！

我的版本：

create-react-app     5.0.0

typescript      4.5.5

react        17.0.2

node        14.17.0

less.          4.1.3

less-loader 11.1.0

react-app-rewired 2.2.1

1. 全局安装create-react-app. 版本 5.0.0

2.创建react项目

1.随便找一个项目文件夹运行npx create-react-app my-app

运行后目录结构：

2.cd my-app

3.yarn start 就可以看到标准的react项目了 不过这个项目默认支持jsx 

如果要用ts 继续看下面

3.安装typescript

1. npm i typescript

2.npx tsc --init 初始化tsconfig文件,这个命令会生成一个tsconfig.json文件

3.拷贝下面的配置到tsconfig.json文件里面

{
  "compilerOptions": {
    "target": "es5",// 目标语言的版本
    "lib": ["dom", "dom.iterable", "es2015.promise", "esnext"],
    // 编译时引入的 ES 功能库，包括：es5 、es6、es7、dom 等。// 如果未设置，则默认为： target 为 es5 时: ["dom", "es5", "scripthost"]
    //target 为 es6 时: ["dom", "es6", "dom.iterable", "scripthost"]
    "allowJs": true, // 允许编译器编译JS，JSX文件
    "checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用
    "skipLibCheck": true,
    "esModuleInterop": true,// 允许export=导出，由import from 导入
    "allowSyntheticDefaultImports": true,
    "strict": true,// 开启所有严格的类型检查
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",// 生成代码的模板标准
    "moduleResolution": "node",// 模块解析策略，ts默认用node的解析策略，即相对的方式导入
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,// 不输出文件,即编译后不会生成任何js文件
    "jsx": "react",//在 .tsx 中支持 JSX ：React 或 Preserve
    "strictFunctionTypes": false,// 不允许函数参数双向协变
    "downlevelIteration": true,// 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现
    "noFallthroughCasesInSwitch": true,// 防止switch语句贯穿(即如果没有break语句后面不会执行)
    "baseUrl": "./src" // 解析非相对模块的基地址，默认是当前目录
  },
  "include": ["src", "**/*.ts", "**/*.tsx"],
  "exclude": ["./node_modules"]
}

4.安装@types/react @types/react-dom @types/node

 npm install --save-dev @types/react @types/react-dom @types/node 

5.完成 运行

代码和目录：

4.安装less和配置代理

4.1安装相关插件

$ npm install react-app-rewired customize-cra --save-dev

4.2 修改启动配置

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react--app-rewired test",
  "eject": "react-scripts eject"
},

4.3 新建配置文件config-overrides.js

const {
  override,
  fixBabelImports,
  addWebpackAlias,
  addLessLoader,
  adjustStyleLoaders,
  addWebpackModuleRule,
  overrideDevServer
} = require('customize-cra');
const path = require('path');
const {name} = require('./package.json');
const paths = require('react-scripts/config/paths');
paths.appBuild = path.join(path.dirname(paths.appBuild), name);


//代理
const apiUrl = 'http://www.abc.com/aa/api';
const devServerConfig = () => (config) => {
  return {
    ...config,
    proxy: {
      '/api': {
        target: apiUrl,
        pathRewrite: {
          '^/tRtApi': '',
        },
      },
    },
  };
};

module.exports = {
  webpack: override(
      (config) => ({
        ...config,
        devtool: config.mode === 'development' ? 'cheap-module-source-map' : false,
      }),
      fixBabelImports('import', {
        libraryName: 'antd',
        style: 'css',
      }),
      addWebpackAlias({
        '@': path.resolve(__dirname, './src'),
      }),
      addLessLoader({
        lessOptions: {
          javascriptEnabled: true,
          localIdentName: '[local]--[hash:base64:5]',
        },
      }),
      adjustStyleLoaders(({use: [, , postcss]}) => {
        const postcssOptions = postcss.options;
        postcss.options = {postcssOptions};
      }),
      addWebpackModuleRule({
        test: /\.(png|jpg|gif|jpeg|svg)$/i,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 20 * 1024,
            esModule: false,
            outputPath: `static/imgs/`,
          },
        },],
      }),
  ),
  devServer: overrideDevServer(devServerConfig())
}

最终目录：

 

git地址：GitHub - Unremittingly/reactTs: react+ts 基础搭建

ps: 5.0.0的create-react-app 自动集成了webpack+ts的配置了，不用去自定义配置webpack 了

老版本的还需要npm run eject  暴露webpack配置然后去自定义ts 配置，

这里使用了customize-cra和react-app-rewired去覆盖重写webpack的配置和设置代理，不推荐使用npm run eject来暴露配置