create-react-app 一些經常使用的自定義配置

yarn安裝依賴包報錯

在項目目錄下運行yarn，報錯以下

yarn install v1.7.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0.tgz: connect ETIMEDOUT 104.16.21.35:443".
info If you think this is a bug, please open a bug report with the information provided in "F:\\await\\react-rabc\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

提示很明顯，網絡鏈接超時，咱們更換一下源地址就好了

npm 設置爲 淘寶源

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

yarn 設置爲 淘寶源

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

項目中若是用的是 sass，須要下載 node-sass，這個依賴包下載是至關的慢，能夠單獨設置源地址

yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
npm config set sass-binary-site http://npm.taobao.org/mirrors/node-sass

最後刪除 node_modules，從新下載就好了

IE10下報錯, Map 未定義

yarn add react-app-polyfill

入口文件第一行引入

// This must be the first line in src/index.js
import 'react-app-polyfill/ie9'

react-app-polyfill

webpack添加 alias

config/modules.js文件中的webpackAliases的alias是解析項目根目錄下的tsconfig.json或者jsconfig.json來返回的，有點複雜

能夠直接在webpack.config.js的resolve.alias字段中的末尾新增字段

resolve: {
  // ...
  alias: {
    // ...
    '@': path.resolve(__dirname, '../src')
  }
}

解決跨域，反向代理配置

一、安裝依賴

yarn add http-proxy-middleware

二、在src目錄下新建setupProxy.js文件

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:6000', // 請求接口地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': '/'
      }
    })
  )
}

項目主要文件路徑配置

包括項目入口文件、靜態目錄、項目構建輸出目錄、配置proxy文件...

在config/paths.js文件配置，挑出幾個最經常使用的

module.exports = {
  dotenv: resolveApp('.env'), // 項目環境變量文件
  appBuild: resolveApp('dist'), // 項目構建輸出目錄，默認 build
  appPublic: resolveApp('public'), // 靜態目錄
  appHtml: resolveApp('public/index.html'), // index.html
  appIndexJs: resolveModule(resolveApp, 'src/index'), // 項目入口文件
  proxySetup: resolveApp('src/setupProxy.js') // 配置 proxy 文件
}

關閉自動開啓瀏覽器配置

在scripts/start.js文件，註釋掉openBrowser(urls.localUrlForBrowser)便可
或者設置環境變量BROWSER爲none

修改 webpack output.publicPath

若是項目不是部署在靜態服務器根目錄下會用到，直接在package.json中配置homepage字段`

{
  "homepage": "/e-admin/"
}

或者在命令行中使用PUBLIC_URL字段

{
  "script": {
        "build": "cross-env PUBLIC_URL=/e-admin/ node scripts/build.js"
    }
}

由於各平臺設置環境變量的方式不一樣，這裏使用 cross-env來抹平差別

eslint 配置

能夠直接在package.json中的eslintConfig字段配置。

在根目錄下新建.eslint.js（或者.eslintrc）配置文件，而後在命令行中設置EXTEND_ESLINT

{
  "script": {
    "build": "cross-env EXTEND_ESLINT=true node scripts/build.js"
    }
}

裝飾器 Decorators 配置

開發中會有不少高階組件以及 redux 的 connect 來包裹組件，使用 Decorators 寫法會直觀許多

• 先安裝 babel 插件

yarn add @babel/plugin-proposal-decorators

• babel 配置，在 plugins 中添加

{
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
}

• 完成上面配置後，編譯就不會報錯了，代碼能正常運行，可是編輯器（這是使用VSCode）卻報錯了，咱們須要作額外的配置

  • 在根目錄下新建 jsconfig.json 文件

    {
      "compilerOptions": {
        "experimentalDecorators": true
      }
    }

  • 打開 VSCode 的 setting.json 文件，添加如下屬性

    "javascript.implicitProjectConfig.experimentalDecorators": true

create-react-app 的 babel 配置默認是在 package.json 中的，能夠單獨放到根目錄下(.babelrc或者babel.config.js)

引入 antd

antd 的 JS 代碼默認支持基於 ES modules 的 tree shaking，即按需引入，只是樣式的引入有些區別

一、直接引入，樣式直接用編譯後的antd.css

import { Button } from 'antd'
import 'antd/dist/antd.css'

function App() {
  return (
    <Button type="primary">按鈕</Button>
  )
}

簡單粗暴，可是無法統一修改一些全局的顏色

二、引入 less

• 安裝依賴

  yarn add less less-loader

• wepack.config.js配置，默認的rules已經包含css和sass，先找到下面的正則

  // style files regexes
  const cssRegex = /\.css$/;
  const cssModuleRegex = /\.module\.css$/;
  const sassRegex = /\.(scss|sass)$/;
  const sassModuleRegex = /\.module\.(scss|sass)$/;
  // 加上匹配 less 文件的正則
  const lessRegex = /\.less$/;
  const lessModuleRegex = /\.module\.less$/;

  而後加上 loader 配置，在sass-loader配置下面加上less-loader的配置

  // Adds support for CSS Modules, but using SASS
  // using the extension .module.scss or .module.sass
  {
    test: sassModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 3,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: {
          getLocalIdent: getCSSModuleLocalIdent,
        },
      },
      'sass-loader'
    ),
  },
  // 在下面加上 less-loader 配置
  {
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
      'less-loader'
    ),
    sideEffects: true,
  },
  // Adds support for CSS Modules, but using less
  // using the extension .module.less
  {
    test: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: {
          getLocalIdent: getCSSModuleLocalIdent,
        }
      },
      'less-loader'
    ),
  },

  找到getStyleLoaders方法，作以下修改：

  // 將 if (preProcessor) {} 中的代碼替換，實際上就是判斷是`less-loader`就生成針對less的options
  if (preProcessor) {
    let preProcessorRule = {
      loader: require.resolve(preProcessor),
      options: {
        sourceMap: true
      }
    }
    if (preProcessor === 'less-loader') {
      preProcessorRule = {
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: true,
          lessOptions: { // 若是使用less-loader@5，須要移除 lessOptions 這一級
            javascriptEnabled: true,
            modifyVars: {
              'primary-color': '#346fff', // 全局主色
              'link-color': '#346fff' // 連接色
            }
          }
        }
      }
    }
    loaders.push(
      {
        loader: require.resolve('resolve-url-loader'),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
      preProcessorRule
    );
  }

• 將import 'antd/dist/antd.css'換成import 'antd/dist/antd.less'

  通過上面的配置後，能夠直接修改less變量來修改全局顏色、間距等，全部變量

  固然若是在配置文件中覆蓋less變量有些麻煩，能夠直接直接新建單獨的less文件來覆蓋默認變量

  @import '~antd/lib/style/themes/default.less';
  @import '~antd/dist/antd.less';
  @import 'customer-theme-file.less'; // 用於覆蓋默認變量

  可是這種方式會加載全部組件的樣式，無法作到按需加載

三、按需加載

• 安裝依賴

  yarn add babel-plugin-import

• babel 配置

  "plugins": [
    [
      "babel-plugin-import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]

• 去掉import 'antd/dist/antd.less'的引入，如今引入組件就會附帶引入對應組件的樣式了

參考連接：

• Create React App 官方文檔
• Create React App 中文文檔
• Ant Design