create-react-app 使用技巧及源碼分析

時間 2019-11-17

標籤 create react app 使用技巧源碼分析欄目 React 简体版

原文原文鏈接

如今大部分 react 項目都是基於 create-react-app 初始化的，對於普通的項目，使用默認的 webpack 配置徹底夠用。今天講講 create-react-app 的使用技巧和源碼分析。javascript

如何加速構建

代碼寫多了會發現 webpack 每次啓動都很慢，能夠經過刪除配置、添加多線程處理來優化體驗。css

去除 `eslint-loader`

eslint-loader 的功能是將 eslint 檢測的內容顯示到命令行，若是確保寫的代碼沒有問題，能夠去除掉。去除以後 webpack-dev-server 開啓速度明顯提高。html

去除上面的代碼java

使用 `thread-loader` 或者 `happypack`

thread-loader 會將後面的 loader 放置在一個 worker 池裏面運行，以達到多線程構建。每一個 worker 都是一個單獨的有 600ms 限制的 node.js 進程。同時跨進程的數據交換也會被限制，請在高開銷的loader中使用。node

{
  test: /\.(js|ts)x?$/i,
  use: [
    'thread-loader',
    {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
      },
    },
  ],
  exclude: /node_modules/,
},
複製代碼

happypack 經過多線程併發加速構建過程，不過包做者如今不多維護了，推薦用 thread-loader。配置略微複雜，並且對複雜的 js less 配置不太友好。react

**exports.plugins = [
  new HappyPack({
    id: 'jsx',
    threads: 4,
    loaders: [ 'babel-loader' ]
  }),

  new HappyPack({
    id: 'styles',
    threads: 2,
    loaders: [ 'style-loader', 'css-loader', 'less-loader' ]
  })
];

exports.module.rules = [
  {
    test: /\.js$/,
    use: 'happypack/loader?id=jsx'
  },

  {
    test: /\.less$/,
    use: 'happypack/loader?id=styles'
  },
]**
複製代碼

偷懶的話選擇 thread-loader 就行了，加一行代碼。webpack

react-app-rewired 和 customize-cra

若是不想 eject 項目怎麼辦？git

react-app-rewired 能夠在不 eject 也不建立額外 react-scripts 的狀況下修改 create-react-app 內置的 webpack 配置，而後你將擁有 create-react-app 的一切特性，且能夠根據你的須要去配置 webpack 的 plugins, loaders 等，推薦配合 customize-cra 一塊兒使用。github

使用方法web

yarn add react-app-rewired customize-cra -D
複製代碼

更改 package.json

/* package.json */

"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}
複製代碼

在根目錄下建立 config-overrides.js 文件，而後改爲你想要的的配置

const {
  override,
  addDecoratorsLegacy,
  disableEsLint,
  addBundleVisualizer,
  addWebpackAlias,
  adjustWorkbox
} = require("customize-cra");
const path = require("path");

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

  // disable eslint in webpack
  disableEsLint(),

  // add webpack bundle visualizer if BUNDLE_VISUALIZE flag is enabled
  process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),

  // add an alias for "ag-grid-react" imports
  addWebpackAlias({
    ["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")
  }),

  // adjust the underlying workbox
  adjustWorkbox(wb =>
    Object.assign(wb, {
      skipWaiting: true,
      exclude: (wb.exclude || []).concat("index.html")
    })
  )
);
複製代碼

定製化使用

添加 less

create-react-app 中默認開啓了 sass 預處理器編譯，想使用 less 須要手工添加。另外對於 css modules ，其內置的作法是對這類文件使用 /\.module\.(scss|sass)$/ 或者 /\.module\.css$/ 檢測。若是想要直接對 .css 或 .less 開啓 css modules ，須要針對 src 和 node_modules 寫兩套 loader 處理規則，緣由是 node_modules 下的文件不須要開啓 css modules。

create-react-app 內置規則

安裝 less 相關依賴

yarn add less less-loader -D
複製代碼

對 src 文件夾下面的 less、css文件進行處理，並開啓 css modules，這裏要注意下，這個配置不針對 node_modules 下的樣式文件，node_modules 下的不須要開啓 css modules，不然會出問題。

// webpack.config.js
{
  test: /\.(le|c)ss$/i,
  use: [
    isProd
      ? {
          loader: MiniCssExtractPlugin.loader,
        }
      : 'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: isProd ? '[hash:base64]' : '[path][name]__[local]--[hash:base64:5]',
        },
      },
    },
    {
      loader: 'less-loader',
      options: {
        javascriptEnabled: true,
      },
    },
  ].filter(Boolean),
  include: srcPath,
},
複製代碼

對 node_modules 的配置

{
  test: /\.(le|c)ss$/i,
  use: [
    isProd
      ? {
          loader: MiniCssExtractPlugin.loader,
        }
      : 'style-loader',
    'css-loader',
    { loader: 'less-loader', options: { javascriptEnabled: true } },
  ].filter(Boolean),
  include: [/node_modules/],
},
複製代碼

源碼分析總結

terser-webpack-plugin

較新版本的腳手架中使用 terser-webpack-plugin 壓縮 js 代碼，uglifyjs 已經再也不推薦使用。

terser 這樣介紹：uglify-es再也不維護，而且 uglify-js 不支持 ES6+ 語法。

簡單使用

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};
複製代碼

file-loader 置於末尾，文件會被自動編譯到 `static/media` 目錄下

在 webpack.config.js 中，file-loader 是在 oneOf 的數組中的最後一個，表示任何一個文件若是沒有命中前面的任何一個 loader，則歸 file-loader 接管了。exclude 表示除了這些它都會處理，默認會重命名文件，並複製到 build/static/media/ 目錄下。

另外代碼中也給出了提示，不要在 file-loader 後面添加 loader，由於全部的剩餘文件都會被 file-loader 處理掉

// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
  loader: require.resolve('file-loader'),
  // Exclude `js` files to keep "css" loader working as it injects
  // its runtime that would otherwise be processed through "file" loader.
  // Also exclude `html` and `json` extensions so they get processed
  // by webpacks internal loaders.
  exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
  options: {
    name: 'static/media/[name].[hash:8].[ext]',
  },
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
複製代碼

file-loader 和 url-loader 的區別

看看 use-loader 的配置，會發現 options.name 和 file-loader 一致，其實 file-loader 是 url-loader 的退化版本，也就是當文件大小是小於 10000 byte 時，url-loader 會將文件轉換成 base64 編碼插入到 html 中，不做爲獨立的一個文件，這樣能夠減小頁面發起的請求數，若是超過這個大小，則使用 file-loader 將文件重命名並複製到 build/static/media 目錄下。

// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
  test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
  loader: require.resolve('url-loader'),
  options: {
    limit: imageInlineSizeLimit, // 內置的是 10000 byte
    name: 'static/media/[name].[hash:8].[ext]',
  },
},
複製代碼

momentjs 冗餘多語言文件

若是有用到 ant design 或直接使用了 momentjs，默認會把多語言的包(node_modules/moment/local/*.js)所有打進來，致使包體積增長，可是咱們不會用到這麼多語言，因此須要排除掉。

plugins:[
    ...,
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
]
複製代碼

env

create-react-app 能夠經過 .env.xxx 來預置一些參數到 process.env 中。具體源碼在 react-scripts/config/env.js 中。

核心代碼

// 從如下文件中加載配置
const dotenvFiles = [
  `${paths.dotenv}.${NODE_ENV}.local`, // 推薦本地使用
  `${paths.dotenv}.${NODE_ENV}`, // .env.production 或者 .env.development
  NODE_ENV !== 'test' && `${paths.dotenv}.local`, // 推薦本地使用
  paths.dotenv, // .env
].filter(Boolean);
複製代碼

// 將 .env 文件的設置應用到 process.env 中
dotenvFiles.forEach(dotenvFile => {
  if (fs.existsSync(dotenvFile)) {
    require('dotenv-expand')(
      require('dotenv').config({
        path: dotenvFile,
      })
    );
  }
});
複製代碼

以 REACT_APP_ 開頭的將會經過 new webpack.DefinePlugin(env.stringified) 注入到全局的 process.env 中。

// env.js
const REACT_APP = /^REACT_APP_/i;

function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        // 預置的兩個
        NODE_ENV: process.env.NODE_ENV || 'development',
        PUBLIC_URL: publicUrl,
      }
    );
  // Stringify all values so we can feed into Webpack DefinePlugin
  const stringified = {
    'process.env': Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };
  return { raw, stringified };
}
複製代碼

因此你能夠愉快的設置一些變量

// .env
REACT_APP_IS_ENV_FILE=TRUE

// .env.development
REACT_APP_IS_DEV_ENV_FILE=TRUE

// .env.local
REACT_APP_IS_LOCAL_ENV_FILE=TRUE
複製代碼

瀏覽器中打印

babel-preset-react-app

babel-preset-react-app 是 create-react-app 下面的一個包，它是 create-react-app 默認的 babel preset，能夠用來處理 js 和 ts 。這樣就不須要額外的配置 ts-loader，另外它內置支持了 ts 的一些功能（裝飾器等），能夠很方便的使用。