create-react-app 搭建不同环境

环境搭建

ES6环境（只能使用ES6语法、默认不支持TS，使用redux、react-redux）

create-react-app my-app1

TS环境（TS和ES6都可以使用、在这个环境使用redux、react-redux传统流程）

create-react-app my-app2 --template typescript

TS环境（只使用TS，在这个环境中使用 @reduxjs/toolkit、react-redux）

create-react-app my-app3 --template redux-typescript

react typescript redux-tookit webpack 环境搭建

1. create-react-app my-app3 --template redux-typescript
2. cd my-app3

在暴露webpack之前要提交代码

3. git init
4. git add .
5. git commit -m '1'
6. git push

暴露webpack配置，可以自己修改webpack环境配置

7. yarn eject

修改webpack配置

以下配置不是必须，可以自行选择需要的进行配置

1.修改 resolve -> alias

webpack.config.js

resolve: {
  alias: {
    ...(xy.alias || {})
  }
}

xy.config.js

alias: {
  '@' : path.resolve(__dirname, 'src')
}

2.添加自定义plugins

webpack.config.js

plugins: [
  // 添加自定义plugins
  ...(xy.plugins || [])
]

xy.config.js

plugins: []

3.修改默认端口号

start.js

//可以写在xy.config.js中，也可以直接修改3000
const DEFAULT_PORT = (xy.devServer && xy.devServer.port) || parseInt(process.env.PORT, 10) || 3000;

4.修改出口文件文件夹名称

path.js

// 修改出口文件
const buildPath = process.env.BUILD_PATH || 'dist';

5.修改后缀名的查找顺序

path.js

const moduleFileExtensions = [
  'tsx',
  'jsx',
  'js',
  'ts',
  'web.mjs',
  'mjs',
  'web.js',
  'web.ts',
  'web.tsx',
  'json',
  'web.jsx',
]

6.整理package.json项目依赖和环境依赖

package.json

"dependencies": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2"
}
"devDependencies": {
  // 除了react和react-dom，其他都是环境依赖
}

这样这个项目用了什么技术，就一目了然了

7.重写devServer??????

8.配置代理

方法一

package.json

  "proxy": "http://localhost:3006",

方法二

webpackDevServer.config.js

proxy: {
  '/api': {
    target: 'https://cnodejs.org',
    changeOrigin: true
  }
}

9.错误遮罩层

webpackDevServer.config.js

overlay: true,

10.修改入口文件

paths.js

// 在webpack.config.js entry 中使用
appIndexJs: resolveModule(resolveApp, 'src/main')

11.开发环境添加进度条

方法一

webpackDevServer.config.js

progress: true,

方法二

webpack.config.js

plugins: [
  new webpack.ProgressPlugin({}),
]

修改package.json

将'dependencies'改为'devDependencies'
再加上sass 和react和react-dom

6.整理package.json项目依赖和环境依赖

package.json

"dependencies": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2"
}
"devDependencies": {
  // 除了react和react-dom，其他都是环境依赖
}

这样这个项目用了什么技术，就一目了然了