react不适用npm run eject生成隐藏配置文件来配置

Posted 2020-12-13 wangyisu

1.需要引入 react-app-rewired与customize-cra包配合使用

npm install react-app-rewired customize-cra

2.在src目录下创建config-overrides.js文件

module.exports = function override(config, env) {
  // 关于webpack的相关配置
  return config;
};

3.引入antd框架按需加载

npm install babel-plugin-import

3.1 在config-overrides.js里配置

const {override,fixBabelImports} = require(‘customize-cra‘)

module.exports = override(
    /**
     * @Descripttion: 按需加载antd
     * @param {type} 
     * @return: 
     */    
    fixBabelImports("import",{
        libraryName:"antd",
        libraryDirectory:‘es‘,
        style:‘css‘,
    }),
)

4.引入less配置

npm install less less-loader

4.1 在config-overrides.js里配置

const {override,fixBabelImports,addLessLoader} = require(‘customize-cra‘)

module.exports = override(
    /**
     * @Descripttion: 按需加载antd
     * @param {type} 
     * @return: 
     */    
    fixBabelImports("import",{
        libraryName:"antd",
        libraryDirectory:‘es‘,
        style:true,
    }),
    /**
     * @Descripttion: 配置less 
     * @modifyVars: 主题配置
     * @return: 
     */
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { ‘@primary-color‘: ‘#1DA57A‘ },
    })
)

 5. 解决跨域问题 

npm install http-proxy-middleware

　　5.1 需要在src 目录下创建 setupProxy.js文件

const proxy = require(‘http-proxy-middleware‘)

module.exports = function(app) {
  app.use(
    proxy.createProxyMiddleware(‘/api‘, {
      target: ‘http://xxxxx:12306/‘,
      changeOrigin: true,
      pathRewrite: {
        ‘^/api‘: ‘‘
      }
    })
  )
}