customize-cra
const { override, fixBabelImports, addLessLoader, useBabelRc } = require('customize-cra');
const rewireReactHotLoader = require('react-app-rewire-hot-loader');
const addCustomize = () => (config, env) => {
config.output.publicPath = process.env.NODE_ENV === 'production' ? '' : '/';
config = rewireReactHotLoader(config, env); // 热更新
return config;
}
require('./color.js')
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
}),
addCustomize(), // 自行配置
useBabelRc() // 开启 .babelrc
);
create-react-app 支持 reflect-matadata
- 发现这个东西 不支持 元数据反射 导致项目里面的依赖注入失效
__解决__ - 1、开启 .babellrc
- 2、添加插件
- 3、添加以下代码
{
"plugins": [
"babel-plugin-transform-typescript-metadata",
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
],
"presets": [
"@babel/preset-typescript"
]
}
线上环境 组件的 displayName 消失了
- 自己写的动态打开组件的方法，线上环境不能正常关闭组件
- 原因是打包后的
displayName都被干掉了
__解决__
babel增加以下配置
https://www.npmjs.com/package/babel-plugin-add-react-displayname
线上二级路由出现空白页
- 公司每个项目放到了一个单独的docker容器里面，文件资源是容器里面的根目录，
- 资源路径换成绝对路径就解决了
- config.output.publicPath = '/'
