Create-react-app+Antd+Less配置

solocoder 發布于2019-08-22 17:10 / 1917人閱讀

摘要：說明官方腳手架工具用于快速創建應用，但依舊有局限性，我們根據項目需求需要對的配置進行修改。這里針對引入的兩種配置方式進行配置。方案一一個對進行自定義配置的社區解決方案。安裝修改啟動項在項目根目錄創建一個用于修改默認配置。

說明

React官方腳手架工具Create-react-app 用于快速創建React應用，但依舊有局限性，我們根據項目需求需要對Create-react-app的配置進行修改。這里針對引入Antd的兩種配置方式進行配置。

方案

一. React-app-rewired（一個對 create-react-app 進行自定義配置的社區解決方案）。
1.安裝react-app-rewired

npm install --save-dev react-app-rewired

2.修改package.json啟動項

/* package.json */
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test --env=jsdom",
}

3.在項目根目錄創建一個 config-overrides.js 用于修改默認配置。

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

4.使用babel-plugin-import實現Antd按需加載，修改config-overrides.js

npm install --save-dev babel-plugin-import

/* config-overrides.js */
const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config, env) {
    config = injectBabelPlugin(["import", { libraryName: "antd", style: "css"}], config);
    return config;
};

5.使用react-app-rewire-less配置Less

npm install --save-dev react-app-rewire-less

/* config-overrides.js */
const { injectBabelPlugin } = require("react-app-rewired");
const rewireLess = require("react-app-rewire-less");

module.exports = function override(config, env) {
   config = injectBabelPlugin(["import", { libraryName: "antd", style: true }], config);
   config = rewireLess.withLoaderOptions({
     modifyVars: { "@primary-color": "#1DA57A" },
   })(config, env);
    return config;
};

我遇到的問題：
1._DEV_ is not defined.

npm install --save-dev react-app-rewire-defind-plugin

/* config-overrides.js */
const { injectBabelPlugin } = require("react-app-rewired");
const rewireLess = require("react-app-rewire-less");
const rewireDefinePlugin = require("react-app-rewire-define-plugin");

module.exports = function override(config, env) {
    config = injectBabelPlugin(["import", { libraryName: "antd", style: true }], config);
    config = rewireLess.withLoaderOptions({
        modifyVars: { "@primary-color": "#1DA57A" },
    })(config, env);
    config = rewireDefinePlugin(config, env, {
        __DEV__: false
    });
    return config;
};

2.Cannot read property "exclude" of undefined
參考 https://github.com/timarney/react-app-rewired/issues/145
解決方案 https://github.com/dawnmist/react-app-rewired/commit/25208ab81791edb4356dc959188bcd4c4471ad87

二. npm run eject 暴露所有內建的配置
1.使用babel-plugin-import實現Antd按需加載，修改package.json，或者在項目根目錄新建文件.babelrc寫配置，注意是二選一。

npm install --save-dev babel-plugin-import

1）package.json

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true
        }
      ]
    ]
  },

2）.babelrc

{
   "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true
        }
      ]
    ]
}

注意：不要認為package.json里已有presets配置這里就不用寫，這里的.babelrc會覆蓋package.json里帶有的babel配置，如果刪除presets配置，會報錯。

2.引入Less

1）安裝less-loader 和 less

npm install --save-dev less-loader less

2）修改config文件夾下的webpack.config.dev.js和webpack.config.prod.js文件(都需要修改)
查找：exclude
原本的 exclude: [/.js$/, /.html$/, /.json$/],
修改為 exclude: [/.html$/, /.(js|jsx)$/, /.(css|less)$/, /.json$/, /.bmp$/, /.gif$/, /.jpe?g$/, /.png$/],

查找：test
原本的 test: /.css$/,
修改為 test: /.(css|less)$/,

在這個test的下面找到use，添加loader

  use: [  
    {...},
    {...},
    {
      loader: require.resolve("less-loader") // compiles Less to CSS
    }
  ],

ok，以上兩種方式修改配置，按需選擇。
我比較鐘意第二種方法，畢竟暴露了webpack配置，更靈活。
如果引入Antd，可能依賴于引入Less，
如果不想引入Antd，可以舍棄Antd部分，按步驟引入Less。

簡書

云服務器 GPU云服務器 create-react-app less antd less2

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94931.html

通過create-react-app從零搭建react環境

摘要：通過文件可以對圖標名稱等信息進行配置。注意，注冊的只在生產環境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。一、快速開始：全局安裝腳手架： $ npm install -g create-react-app 通過腳手架搭建項目： $ create-react-app 開始項目： ...

Cympros 2019-08-02 16:02 評論0 收藏0
通過create-react-app從零搭建react環境

摘要：通過文件可以對圖標名稱等信息進行配置。注意，注冊的只在生產環境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。一、快速開始：全局安裝腳手架： $ npm install -g create-react-app 通過腳手架搭建項目： $ create-react-app 開始項目： ...

CoyPan 2019-08-22 18:05 評論0 收藏0
初探react技術棧（一）

摘要：相信用的同學也不少找到函數在其中中添加啟用編譯。。。react 最近已經開始使用react技術棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護的腳手架應用我們一般也采用這個 $ npm or c...

劉玉平 2019-05-23 16:23 評論0 收藏0
初探React技術棧（一）

react 最近已經開始使用react技術棧了，從頭開始搭建項目，有必要的記錄一下配置的過程以及項目分層的思路，這次后臺項目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語言react-intl create-react-app 這是官方維護的腳手架應用我們一般也采用這個 $ npm or cnpm $ npm install create-react...

neroneroffy 2019-08-26 13:53 評論0 收藏0
采用React+Ant Design組件化開發前端界面(一)

摘要：基礎知識使用腳手架創建項目并啟動安裝腳手架使用腳手架創建項目為項目名。否則可能導致項目發布上線后，報錯無法執行。安裝測試使用注意默認情況下安裝的需要引入才會生效樣式，但很多時候，我們只是使用了部分組件，引入整個樣式文件，有些得不償失。 showImg(http://upload-images.jianshu.io/upload_images/2774022-8d65190f1b972c...

cppprimer 2019-08-30 15:54 評論0 收藏0