CRA构建react项目

1.使用create-react-app开始构建代码

create-react-ap官方网址：https://create-react-app.dev/docs/getting-starte

# 创建js项目
yarn create react-app my-app
npx create-react-app my-app
# 创建ts项目
yarn create react-app my-app --template typescript
npx create-react-app my-app --template typescript

2.暴露react-scripts

yarn run eject

2.1 解读暴露之后的package.json

# babel配置，babel配置react-app是对babel-presets-env的重写
"babel": {
  "presets": [
    "react-app"
  ]
}

# browserslist浏览器兼容的配置
 "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie >= 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
}

3. 修改cra配置

3.1 增加less的配置

在config/webpack.config.js增加配置

//  新增less、lessModule正则表达式
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

//  resolve=>module=>rules=>oneOf中增加 less,lessModule配置项
  
    {
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 3,
          sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
          modules: {
            mode: 'icss',
          },
        },
        'less-loader'
      ),
      // Don't consider CSS imports dead code even if the
      // containing package claims to have no side effects.
      // Remove this when webpack adds a warning or an error for this.
      // See https://github.com/webpack/webpack/issues/6571
      sideEffects: true,
    },
    // Adds support for CSS Modules, but using SASS
    // using the extension .module.scss or .module.sass
    {
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 3,
          sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
          modules: {
            mode: 'local',
            getLocalIdent: getCSSModuleLocalIdent,
          },
        },
        'less-loader'
      ),
    },

3.2 增加别名的配置

在config/webpack.config.js的配置

// paths.appSrc为appSrc: resolveApp('src'),
 alias: {
    '@':paths.appSrc
 }

3.3 修改开发服务器端口号

在scripts/start.js中修改配置,修改开发服务器端口号为8888

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8888;

或者使用cross-env来更改port

在package.json中修改scripts增加cross-env PORT=8899

 "scripts": {
    "start": "cross-env PORT=8899 node scripts/start.js"
  },

未安装cross-env需要安装

yarn add cross-env

3.4 处理浏览器兼容性

如果需要增加ie11兼容性,index.js中增加react-app-polyfill

// index.js增加新增
import 'react-app-polyfill/ie11'
import 'react-app-polyfill/stable';

# package.json中新增browserslist的production配置：ie > 11

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie > 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

3.5 处理跨域代理

在src中增加文件src/setupProxy.js

  proxySetup: resolveApp('src/setupProxy.js'),

src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    createProxyMiddleware('/api1', {
      target: 'https://1111',
      changeOrigin: true,
      ws: true,
      pathRewrite: { "^/api1": "" }
    })
  );

  app.use(
    createProxyMiddleware('/api2', {
      target: 'https://2',
      changeOrigin: true,
      ws: true,
      pathRewrite: { "^/api2": "" }
    })
  )
}