介紹

• create-creact-app項目，如果需要手動修改配置，需先npm run eject彈出配置，這個過程是不可逆的

• 推薦使用第三方工具進(jìn)行修改

• 這里介紹使用react-app-rewired。它的作用是用來幫助你重寫react腳手架配置

• react-app-rewired@2.x版本需要搭配customize-cra使用。

• customize-cra的作用是幫助你自定義react腳手架2.x版本配置

基本使用

• 安裝：npm i react-app-rewired customize-cra --save-dev

• 在根目錄下新建文件config-overrides.js文件

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config
}

• 修改package.json文件

{
  // ...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  // ...
}

使用ES7的裝飾器

• 修改config-overrides.js文件

const {
  override,
  addDecoratorsLegacy
} = require('customize-cra')

module.exports = override(
  // enable legacy decorators babel plugin
  addDecoratorsLegacy(),
)

使用Less

• 安裝less和less-loader：npm i less less-loader --save-dev

• 修改config-overrides.js文件

const {
  override,
  // ...
  addLessLoader,
  // ...
} = require('customize-cra')

module.exports = override(
  // ...
  // less
  // addLessLoader(),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      // Optionally adjust URLs to be relative. When false, URLs are already relative to the entry less file.
      relativeUrls: false,
      modifyVars: { '@primary-color': '#A80000' },
      // cssModules: {
      //   // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
      //   localIdentName: "[path][name]__[local]--[hash:base64:5]",
      // }
    } 
  })
  // ...
)

antd-mobile按需引入

• 安裝babel-plugin-import：npm i babel-plugin-import --save-dev

• 修改config-overrides.js文件

const {
  override,
  // ...
  fixBabelImports
} = require('customize-cra')

module.exports = override(
  // ...

  // antd-mobile按需加載 - babel-plugin-import
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css'
  })
)

• 修改config-overrides.js文件，覆蓋默認(rèn)樣式

const {
  override,
  // ...
  addLessLoader,
  fixBabelImports,
  // ...
} = require('customize-cra')

module.exports = override(
  // ...
  // less
  addLessLoader({
    // 現(xiàn)在的寫法
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { '@brand-primary': '#1DA57A' },
    },
    // 原來的寫法
    // javascriptEnabled: true,
    // modifyVars: {
    //   '@primary-color': '#1DA57A',
    // },
    // localIdentName: '[local]--[hash:base64:5]' // 自定義 CSS Modules 的 localIdentName
  }),

  // antd-mobile按需加載 - babel-plugin-import
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    libraryDirectory: 'es',
    // style: 'css'
    style: true
  }),
  // ...
)

添加別名

• 修改config-overrides.js文件

const {
  override,
  // ...
  addWebpackAlias
} = require('customize-cra')
const path = require('path')

module.exports = override(
  // ...
  // 路徑別名
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src')
  })
)

配置多環(huán)境

• 安裝dotenv-cli：npm i dotenv-cli --save-dev

• 在根目錄下添加.env.dev文件

REACT_APP_URL_API=http://
REACT_APP_URL_UPLOAD=http://upload.

• 在根目錄下添加.env.sit文件

REACT_APP_URL_API=http://
REACT_APP_URL_UPLOAD=http://upload.

• 在根目錄下添加.env.prod文件

REACT_APP_URL_API=http://
REACT_APP_URL_UPLOAD=http://upload.

• 修改package.json文件

{
  // ...
  "scripts": {
    "start": "dotenv -e .env.dev react-app-rewired start",
    "build:sit": "dotenv -e .env.sit react-app-rewired build",
    "build:prod": "dotenv -e .env.prod react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  // ...
}

• 在index.html中使用%REACT_APP_URL_API%

• 在js/jsx中：process.env.REACT_APP_URL_API

proxy

開發(fā)環(huán)境下跨域問題，前端一般是給本地的devServer設(shè)置代理

• 安裝http-proxy-middleware：npm i http-proxy-middleware --save-dev

• 在src/目錄下新建文件setupProxy.js（注意：文件名不能修改！！cra會按照src/setupProxy.js這個路徑解析）

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

module.exports = function(app) {
  app.use(
    proxy('/api', {
      target: 'http://localhost:3001/',
      changeOrigin: true,
      // pathRewrite: {
      //   '^/api': ''
      // }
    })
  )
}

• 重新啟動即可

http-proxy-middleware的1.x版本做了較大改動。

以上方法配置會出現(xiàn)proxy is not a function的問題

解決辦法是修改src/setupProxy.js文件

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(createProxyMiddleware('/api', {
    target: 'http://localhost:3001/',
    changeOrigin: true,
    // pathRewrite: {
    //   '^/api': ''
    // }
  }))
}