1介绍
create-creact-app项目，如果需要手动修改配置，需先npm run eject弹出配置，这个过程是不可逆的，因此推荐使用第三方工具进行修改。现在使用比较多的是react-app-rewired，它的作用是在不eject的情况下修改webpack配置，官方网站为www.npmjs.com/package/rea…
react-app-rewired@2.x版本需要搭配customize-cra使用，customize-cra的作用是帮助你自定义react脚手架配置。
2基本使用
- 安装：
npm i react-app-rewired --save-dev
npm install react-app-rewired --save-dev
npm install customize-cra --save-dev
- 在根目录下新建文件
config-overrides.js文件，该文件与src目录同级
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config
}
目录结构关系如下
+-- your-project
| +-- config-overrides.js
| +-- node_modules
| +-- package.json
| +-- public
| +-- README.md
| +-- src
- 修改
package.json文件
{
// ...
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
// ...
}
3使用ES7的装饰器
- 修改
config-overrides.js文件
const {
override,
addDecoratorsLegacy
} = require('customize-cra')
module.exports = override(
// enable legacy decorators babel plugin
addDecoratorsLegacy(),
)
4添加Less支持
-
安装
less和less-loader：npm i less less-loader --save-dev -
修改
config-overrides.js文件
const {
override,
// ...
addLessLoader,
// ...
} = require('customize-cra')
module.exports = override(
// ...
// less
// addLessLoader(),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
// Optionally adjust URLs to be relative. When false, URLs are already relative to the entry less file.
relativeUrls: false,
modifyVars: { '@primary-color': '#A80000' },
// cssModules: {
// // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
// localIdentName: "[path][name]__[local]--[hash:base64:5]",
// }
}
})
// ...
)
5设置路径别名
- 修改
config-overrides.js文件
const {
override,
// ...
addWebpackAlias
} = require('customize-cra')
const path = require('path')
module.exports = override(
// ...
// 路径别名
addWebpackAlias({
'@': path.resolve(__dirname, 'src')
})
)
6配置多环境
查看 create-react-app 的官方文档可以发现，create-react-app 默认是支持多个环境配置文件的：
-
.env：默认。 -
.env.local：本地覆盖。除 test 之外的所有环境都加载此文件。 -
.env.development,.env.test,.env.production：设置特定环境。 -
.env.development.local,.env.test.local,.env.production.local：设置特定环境的本地覆盖。
但更建议使用dotenv-cli来管理环境配置。
-
安装
dotenv-cli：npm i dotenv-cli --save-dev -
在根目录下添加
.env.dev文件
REACT_APP_URL_API=http://dev.com
REACT_APP_URL_UPLOAD=http://upload.dev.com
- 在根目录下添加
.env.sit文件
REACT_APP_URL_API=http://sit.com
REACT_APP_URL_UPLOAD=http://upload.sit.com
- 在根目录下添加
.env.prod文件
REACT_APP_URL_API=http://prod.com
REACT_APP_URL_UPLOAD=http://upload.prod.com
- 修改
package.json文件
{
// ...
"scripts": {
"start": "dotenv -e .env.dev react-app-rewired start",
"build:sit": "dotenv -e .env.sit react-app-rewired build",
"build:prod": "dotenv -e .env.prod react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
// ...
}
-
在
index.html中使用%REACT_APP_URL_API% -
在
js/jsx中：process.env.REACT_APP_URL_API
7proxy
开发环境下跨域问题，前端一般是给本地的devServer设置代理
-
安装
http-proxy-middleware：npm i http-proxy-middleware --save-dev -
在
src/目录下新建文件setupProxy.js（注意：文件名不能修改！！cra会按照src/setupProxy.js这个路径解析）
const {createProxyMiddleware} = require('http-proxy-middleware')
module.exports = function (app) {
app.use(createProxyMiddleware('/api', {
target: 'http://127.0.0.1:3009',
secure: false,
changeOrigin: true,
pathRewrite: {
"^/api": "/api"
}
}))
}
- 重新启动即可
8antd按需引入
-
安装
babel-plugin-import：npm i babel-plugin-import --save-dev -
修改
config-overrides.js文件 -
随版本更新可能有所变动，建议查看官方文档。
const {
override,
// ...
fixBabelImports
} = require('customize-cra')
module.exports = override(
// ...
// antd按需加载 - babel-plugin-import
fixBabelImports('import', {
libraryName: 'antd',
style: 'css'
})
)
- 修改
config-overrides.js文件，覆盖默认样式
const {
override,
// ...
addLessLoader,
fixBabelImports,
// ...
} = require('customize-cra')
module.exports = override(
// ...
// less
addLessLoader({
// 现在的写法
lessOptions: {
javascriptEnabled: true,
modifyVars: { '@brand-primary': '#1DA57A' },
},
}),
// antd按需加载 - babel-plugin-import
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true
}),
// ...
)
本文使用 文章同步助手 同步
