create-react-app開發常用設定教學

2022-06-24 22:01:09

引言

注: 如未找到組態檔請使用npm run eject彈出組態檔

當前對應版本react 16.2

設定代理

在開發中往往是跨域請求的，設定一下請求代理可以解決這個問題

// package.json 檔案
"proxy": "http://xxx.xxx",

模組熱替換(HMR)

預設情況下在每次修改內容的時候都會重新整理頁面，有時候我們並不想要這樣，比如有一個bug需要重複點選或者重複操作多次才能實現，但是由於我們每次修改都會重新整理頁面，可能會導致這個bug很難被測試或者實現，這個設定在我看來非常有用，當然這不是必須的，但是可以適當的提高開發效率。在React 的入口檔案 src/index.js中，新增一些設定程式碼。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
  <App />,
  document.getElementById('root')
);
//  +++++ 加入+++++
if (module.hot) {
  module.hot.accept();
}

css區域性化

正常匯入css情況下會汙染到全域性
修改 webpack-config-dev.js 及 webpack-config-prod.js 設定

options: {
  modules: true,
  localIdentName: '__[local]--[hash:base64:5]'
}

注意: 使用 css-module會導致 ant 樣式失效...其次有其他css區域性化解決方案比如 styled-components可參考我另外一篇文章騷裡騷氣的styled-components快速入門

支援裝飾器寫法

比如redux或者mobx可以使用@寫法

安裝 transform-decorators-legacy

npm install --save-dev babel-plugin-transform-decorators-legacy

外掛中使用legacy是因為Babel 5支援處理裝飾器，但是它也許會跟最終的標準有區別，所以才使用legacy這個詞。

//  package.json
"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
 // +++ 加入設定 +++
      "transform-decorators-legacy",
      // ...ant設定
    ]
  }

請注意， plugins 的屬性非常重要: transform-decorators-legacy 應該放在最前面。 babel 設定有問題？請先檢視這個 issue 。

打包後路徑問題導致頁面空白

//  package.json 檔案增加設定
...
"homepage": ".",
...

注: 如果直接開啟index.html後檔案正確載入但頁面仍然空白，請檢查你是否使用的是 BrowserRouter (同vue的history模式)需要後端設定支援，否則請使用HashRouter 即帶 #

設定簡化路徑

當頁面巢狀過深時我們會發現在路徑通常都要這麼寫

import xx from './../../../xxx/qqq'通過設定webpack可以寫成import xx from '@/xxx/qqq'

// 修改 webpack.config.dev 與 webpack.config.prod 兩個檔案 加入相同設定
...
// +++ 找個開心的地方加入設定
function resolve(dir) {
    return path.join(__dirname, '..', dir)
}
// 修改
alias: {
      'react-native': 'react-native-web',
        // +++ 加入設定
      '@': resolve('src')
}

優點: 如果按照相對路徑的方法參照，每次要計算.. 並且檔案一旦遷移那麼又要重新計算，如此組態檔遷移也不需要計算
缺點: 在部分編輯器可能會失去檔案參照高亮(比如webstrom), 並且不能通過快捷鍵快速查詢其參照.

注 : 這屬於webpack的設定，當然在vue-cli中也適用(更新:目前vue-cli已經預設支援這種設定)

按需參照antd-mobile（antd同）

安裝 antd-mobile npm i antd-mobile -S
安裝 babel-plugin-import npm i babel-plugin-import -D

 // package.json 檔案
  "babel": {
    "presets": [
      "react-app"
    ],
    // 加入設定
    "plugins": [
    // 如果使用了 客製化顏色功能 將 "css" => true 同時需要設定 less
      ["import", { "libraryName": "antd-mobile", "style": "css" }]
    ]
  }

打包構建分析

build之後發現包體積比較大，用 webpack-bundle-analyzer 分析各個js檔案的打包

// webpack.config.prod.js
const BundleAnalyzerPlugin = 
require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// ...code
// 找到 plugins 記得別加錯地方 很多 new xxx()的才是
plugins: [
    new xxx(),
    new xxx(),
    // +++++
    new BundleAnalyzerPlugin(),
]

生產環境去掉map檔案

有時候你會發現build時間過長，參見npm run build takes 1-2 hours to build 我們可以去除掉map檔案構建

// webpack.config.prod.js
- devtool: shouldUseSourceMap ? 'source-map' : false
// 改為
devtool: false,

設定less

安裝

yarn add less-loader less --dev

//  webpack.config.dev.js
  module: {
    strictExportPresence: true,
    //...
    rules: [
        // ...
         {
            test: /.(css|less)$/, // 修改
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {},
              },
              // 增加
              {
                loader: require.resolve('less-loader') // compiles Less to CSS
              }
            ],
          },
    ]
// webpack.config.prod.js
{
    test: /.(css|less)$/, // 修改
                loader: ExtractTextPlugin.extract(
              Object.assign(
                {
                  fallback: {
                    loader: require.resolve('style-loader'),
                    options: {
                      hmr: false,
                    },
                  },
                  use: [
                  // ...code
                    {
                      loader: require.resolve('less-loader') // 增加
                    }
                  ],
                },
                extractTextPluginOptions
              )
            ),
}

設定不同環境變數

由於create-react-app 忽略了 env.NODE_ENV 環境變數的設定，參考檔案但是有時候在一些專案中，我們可能需要根據不同的環境變數使用不同的設定，那麼我們可以這麼做:

如果需要自定義環境變數必須以REACT_APP_開頭

// 修改package.json
  "scripts": {
    "start": "cross-env REACT_APP_SECRET_API=development node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
// 這三個是我加的 可以根據你的業務需求來
    "build:dev": "cross-env REACT_APP_SECRET_API=development node scripts/build.js",
    "build:test": "cross-env REACT_APP_SECRET_API=test node scripts/build.js",
    "build:pro": "cross-env REACT_APP_SECRET_API=production node scripts/build.js",
  },

然後我們在執行 npm run build:dev 的時候就可以拿到 REACT_APP_SECRET_API的值為development前面加 cross-env是為了相容不同平臺需要自行安裝 npm install cross-env --save-dev

以上就是create-react-app開發常用設定教學的詳細內容，更多關於create-react-app開發設定的資料請關注it145.com其它相關文章！