create-react-app项目配置

Posted 2021-02-14 ak-b

创建项目

npx create-react-app 项目名

自定义配置

安装自定义配置所需插件：yarn add react-app-rewired customize-cra --dev

安装 babel-plugin-import 来加载 antd：yarn add babel-plugin-import --dev

项目根目录新建一个 config-overrides.js

const { override, fixBabelImports, addWebpackAlias } = require('customize-cra')
const path = require('path')
module.exports = override(
  // 配置路径别名
  addWebpackAlias({
    components: path.resolve(__dirname, 'src/components'),
    utils: path.resolve(__dirname, 'src/utils'),
    actions: path.resolve(__dirname, 'src/actions')
  }),
  //按需加载antd
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  })
)

跨域配置

运行：yarn add http-proxy-middleware --dev
在 src 目录下新建 setupProxy.js

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

module.exports = function(app) {
  app.use(
    proxy('/api', {
      target: 'https://gitee.com/api/v5/',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  )
}

使用sass

yarn add node-sass