Open KrisGuoQin opened 4 years ago
$ yarn add @craco/craco
# OR
$ npm install @craco/craco --save
my-app
|-- node_modules
|-- craco.config.js
|--package.json
/* craco.config.js */
/* export object */
export.default = {
...
}
/* craco.config.js */
/* export object */
export.default = function({env}){
return {
....
}
}
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "craco start",
- "build": "react-scripts build",
+ "build": "craco build",
- "test": "react-scripts test",
+ "test": "craco test",
}
$ npm run start
# OR
$ yarn start
const path = require('path');
const { whenProd } = require('@craco/craco');
const WebpackPluginReplaceApi = require('webpack-plugin-replace-api');
const ZipPlugin = require('zip-webpack-plugin');
const RemovePlugin = require('remove-files-webpack-plugin');
const ReplaceApiOptions = [
{
test: /\/example/g,
target: 'http://api-dev.example.net'
}
];
module.exports = {
babel: {
plugins: [
'babel-plugin-jsx-control-statements',
'ramda',
[
'import',
{
libraryName: 'antd-mobile',
style: 'css'
}
]
]
},
webpack: {
alias: {
'@': path.resolve(__dirname, 'src')
},
configure: {
output: {
publicPath: './'
}
},
plugins: [
...whenProd(() => [
new RemovePlugin({
before: {
include: ['app.zip']
}
}),
new WebpackPluginReplaceApi(ReplaceApiOptions),
new ZipPlugin({
path: path.join(__dirname),
filename: 'app.zip'
})
], [])
]
},
eslint: {
configure: {
"env": {
"jsx-control-statements/jsx-control-statements": true
},
"extends": [
"plugin:jsx-control-statements/recommended"
],
"plugins": [
"jsx-control-statements"
],
"rules": {
"react/jsx-no-undef": [2, { "allowGlobals": true }],
"jsx-control-statements/jsx-jcs-no-undef": 2
}
}
},
devServer: {
proxy: {
'/example': {
target: 'http://api-dev.example.net/',
changeOrigin: true
}
}
},
plugins: [
{
plugin: {
overrideDevServerConfig: ({ devServerConfig, cracoConfig, pluginOptions, context: { env, paths, proxy, allowedHost } }) => {
return devServerConfig;
},
}
}
]
}
React App Configuration Override, an easy and comprehensible configuration layer for create-react-app