creat-react-app相关

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 = '/'