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

Cympros 發布于2019-08-02 16:02 / 3514人閱讀

摘要：通過文件可以對圖標名稱等信息進行配置。注意，注冊的只在生產環境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。

一、快速開始：

全局安裝腳手架：

$ npm install -g create-react-app

通過腳手架搭建項目：

$ create-react-app <項目名稱>

開始項目：

$ cd <項目名>
$ npm run start

二、查看項目package.json配置

2.1 package.json 一覽

{
  ......
  "homepage": ".",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

2.2 可用腳本命令說明：

首先說明：通過npm run 執行下面命令實際上是運行 node_modules/react-srcipt/script下對應的腳本文件；

npm run start : 開始項目，通過http://localhost:3000 可訪問項目；

npm run build : 項目打包，在生產環境中編譯代碼，并放在build目錄中；所有代碼將被正確打包，并進行優化、壓縮同時使用hash重命名文件；執行該命令前需要在package.json中新增條配置"homepage": "."（上面配置文件已給出）, 同時build后的項目需要在服務器下才能訪問；否則打開的將是空白頁面；

npm run test : 交互監視模式下啟動測試運行程序；

npm run eject : 將隱藏的配置導出；需要知道的是create-react-app腳手架本質上是使用react-scripts進行配置項目，所有配置文件信息都被隱藏起來(node_modules/react-scripts)；當需要手動修改擴展webpack配置時有時就需要將隱藏的配置暴露出來；特別需要注意的是該操作是一個單向操作，一旦使用eject，那么就不能恢復了(再次將配置隱藏)；

三、自動生成的項目目錄以及文件解析：

node_modules : 項目依賴包目錄；

public: 公共目錄，該目錄下的文件都不會被webpack進行加載、解析、打包；通過npm run build進行打包時該項目下的所有文件將會直接被復制到build目錄下；

favicon.ico : 是網站圖標[可替換刪除]

index.html: 頁面模板，webpack打包后將輸出文件引入到該模板內；補充：index.html中通過環境變量%PUBLIC_URL% 來指向public目錄路徑；

manifest.json: PWA將應用添加至桌面的功能的實現依賴于 manifest.json 。通過manifest.json 文件可以對圖標、名稱等信息進行配置。

src: 是源碼目錄該目錄下除了index.js App.test.js registerServiceWorker.js 文件具有一定意義其余文件都是演示使用可直接刪除

index.js: 是整個項目的入口文件；

App.test.js: 測試單元演示文件，暫時并不知道干嘛用；可以直接刪除；

registerServiceWorker.js: service worker 是在后臺運行的一個線程，可以用來處理離線緩存、消息推送、后臺自動更新等任務；registerServiceWorker就是為react項目注冊了一個service worker，用來做資源的緩存，這樣你下次訪問時，就可以更快的獲取資源。而且因為資源被緩存，所以即使在離線的情況下也可以訪問應用（此時使用的資源是之前緩存的資源）。注意，registerServiceWorker注冊的service worker 只在生產環境中生效，并且該功能只有在https下才能有效果；

.gitignore: 該文件是github過濾文件配置

README.md: 該文件是github描述文件

package.json: 定義了項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）。部分依賴模塊被隱藏；

yarn.lock：每次通過yarm添加依賴或者更新包版本時 yarn都會把相關版本信息寫入yarn.lock文件；npm也有類似功能，npm 也可以生成一個鎖文件，就是使用上沒有yarn方便

四、擴展webpack配置(以 less為例）

4.1 方法一：將 webpack 配置暴露出來并進行修改

暴露配置文件：

$ npm run eject
說明: 執行eject腳本后，項目下會新增或對部分配置文件進行修改；項目下 script 目錄存放著腳本文件， config 目錄下存放著配置文件

下載安裝依賴：less-loader less

$ npm install less-loader less -dev

修改 config 目錄下的webpack配置文件：

// 需同時修改下面的兩個文件：
// 開發環境下的配置文件：webpack.config.dev.js 
// 生產環境下的配置文件：webpack.config.prod.js
// 兩個文件的修改內容相同，對應修改內容如下(三處需要進行修改)
......
{
    // 【1】修改文件匹配正則
    test: /.(css|less)$/, 
    use: [
        require.resolve("style-loader"),
        {
            loader: require.resolve("css-loader"),
            options: {
            // 【2】將原本數字 1  改為數字2
            importLoaders: 2,
        },
        },
        { .... },
        // 【3】添加新的加載配置對象
        {
            loader: require.resolve("less-loader"),
        }
    ],
}
......

4.2 方法二：使用 react-app-rewired 對 webpack 進行自定義配置(覆蓋或添加)

安裝依賴包 react-app-rewired：

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

修改 package.json 中的腳本命令：修改如下

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  }

在項目根目錄下(和 package.json 同級)新建配置文件 config-overrides.js ，并添加如下內容

module.exports = function override(config, env) {
    // 在這里添加配置
    return config;
}

安裝依賴包 react-app-rewire-less，通過該依賴包來實現對 less 的支持：

$ npm install react-app-rewire-less --save
說明: 這里不再需要額外多帶帶安裝依賴包：less-loader  less

修改 config-overrides.js 配置文件，為 webpack 配置 less

const rewireLess = require("react-app-rewire-less");
module.exports = function override(config, env) {
  // 只需要一條配置信息即可實現對less的支持
  config = rewireLess(config, env);
  // 下面注釋用于配置loader的參數
  // config = rewireLess.withLoaderOptions(someLoaderOptions)(config, env);
  return config;
}

五、在 create-react-app 中使用Antd

5.1 一般使用方法（不推薦）

搭建項目：

$ create-react-app demo
$ cd demo
$ npm run start

引入 antd 依賴包：

$ npm install npm

引入 antd 組件之前需要先引入 antd 樣式( 在項目入口引入所有樣式 )：

import antd/dist/antd.css

在項目中引入 antd 組件

import { Button } from "antd";

5.2 按需加載

- 上面引入組件和樣式的方式，會一次性加載所有樣式并引入組件中的所有相應模塊；
- 這種引入方式將會影響到應用的網絡性能；
- 相應的就需要改變引入組件和樣式的方式，實現樣式和組件的按需加載；
- 下面將介紹三種按需加載組件樣式的方法：

5.2.1 方法一: 精確加載組件

import Button from "antd/lib/button";
import "antd/lib/button/style"; 
// 或者通過import antd/lib/button/style/css 進行加載樣式

5.2.2 方法二：通過暴露配置配合 babel-plugin-import插件實現按需加載
babel-plugin-import 是一個用于按需加載組件代碼和樣式的 babel 插件

暴露配置

$ npm run eject

安裝插件：

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

修改 package.json

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

配置完后可直接導入 antd 的組件，不再需要另外引入css樣式；

import { Button } from "antd";9

5.2.2 方法三：通過 babel-plugin-import + react-app-rewired實現按需加載（官網推薦）

react-app-rewired：的使用上文有過描述；主要用于在不暴露配置的情況下對webpack的配置進行擴展；

babel-plugin-import 是一個用于按需加載組件代碼和樣式的 babel 插件

安裝依賴包：babel-plugin-import

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

通過 react-app-rewired 對 webpack 配置進行擴展添加新的babel插件，config-overrides.js 修改 ( 添加 ) 如下內容：

// 引入 react-app-rewired 添加 babel 插件的函數
const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config, env) {
    config = injectBabelPlugin(["import", 
        { libraryName: "antd", libraryDirectory: "es", style: "css" }], config);
    return config;
};

配置完后可直接導入 antd 的組件，不再需要另外引入css樣式；

import { Button } from "antd";9

5.3 通過 react-app-rewired 擴展 webpack 來實現 antd 自定義主題

主要通過利用了 less-loader 的 modifyVars 參數來進行主題配置

安裝配置：react-app-rewired (上文已經詳細介紹過這里就不再細說)

安裝依賴包 react-app-rewire-less ：實現對 less 的支持同時添加 modifyVars 加載參數設置

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

修改 config-overrides.js 配置文件

const rewireLess = require("react-app-rewire-less");
const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config, env) {
    // 擴展 webpack ==> 支持less
    config = rewireLess(config, env);
    // 配置loader參數
    config = rewireLess.withLoaderOptions({
        // 修改默認顏色 實現自定義主題
        modifyVars: { "@primary-color": "#1DA57A" },
   })(config, env);
   // antd 按需加載配置
    config = injectBabelPlugin(["import", 
        { libraryName: "antd", libraryDirectory: "es", style: true }], config);
    return config;
}

5.4 通過插件 babel-plugin-transform-decorators-legacy 實現對修飾器的支持

5.4.1 通過暴露配置實現

暴露配置

$ npm run eject

安裝插件：

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

修改 package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    ["transform-decorators-legacy"]
  ]
},

5.4.2 使用插件 react-app-rewired 對配置進行擴展實現對修飾器的支持

react-app-rewired 的使用詳見上文：

安裝插件：

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

編寫 config-overrides.js 配置文件

// 導入添加babel插件的函數
const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  // 修飾器擴展 (添加babel插件：transform-decorators-legacy ）
  config = injectBabelPlugin("transform-decorators-legacy", config)
  return config;
};

六、常見問題：

6.1 通過 react-app-rewired 進行擴展配置時發現啟動項目后并沒有效果？

在確保一起配置沒有問題下：

請確認是否有對腳本命令進行了正確的修改，使用react-app-rewired 擴展配置需要修改腳本命令

{
  ....
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
...
}

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

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

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

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

CoyPan 2019-08-22 18:05 評論0 收藏0
手把手教你從零搭建react局部熱加載環境

摘要：有沒有辦法實現就局部刷新呢當然是有第十步執行為了實現局部熱加載，我們需要添加插件。前言用了3個多月的vue自認為已經是一名合格的vue框架api搬運工，對于vue的api使用到達了一定瓶頸，無奈水平有限，每每深入底層觀賞源碼時候都迷失了自己。遂決定再找個框架學習學習看看能否突破思維局限，加上本人早已對React、RN技術垂涎已久,于是決定找找教程來學習。無奈第一步就卡在了環境搭...

quietin 2019-08-21 17:23 評論0 收藏0
從零開始開發一個react腳手架(二)

摘要：弄清之后，就去腳手架源代碼里面找。這樣更加靈活，而且復用性高，起新項目，如果差別不大，幾乎可以做到零配置，這樣開發者壓根就不需要關心業務之外的東西從零開始開發一個腳手架三上一篇已經初步整了個kkk-react，這一篇不寫代碼，粗略講解下create-react-app的部分源碼。前沿：科普下看源碼的思路。以本人看過N多源碼的經驗總結，想要看這種腳手架或者npm包的源碼，第一步就是看...

Y3G 2019-08-26 13:39 評論0 收藏0
從零開始開發一個react腳手架（三）

摘要：前面兩篇文都只是鋪墊，今天至少要實現一個簡單的開始之前再說一下墊片和。我一開始以為會在引入，但并不是。這是我的，當然以后會拆出來，作為目錄下的一個執行文件。里面就配置了一個。下一篇從零開始開發一個腳手架四前面兩篇文都只是鋪墊，今天至少要實現一個簡單react的hello word 開始之前再說一下墊片和presets。前幾天突發疑問，create-react-app是怎么做的墊片，...

wums 2019-08-23 16:47 評論0 收藏0
深度解析`create-react-app`源碼

摘要：這個選項看意思就知道了，默認使用來安裝，運行，如果你沒有使用，你可能就需要這個配置了，指定使用。 2018-06-13 更新。昨天突然好奇在Google上搜了一波關于create-react-app 源碼的關鍵詞，發現掘金出現好幾篇仿文，就連我開頭前沿瞎幾把啰嗦的話都抄，我還能說什么是吧？以后博客還是首發在Github上，地址戳這里戳這里！！轉載求你們注明出處、改編求你們貼一下參考鏈...

waruqi 2019-08-22 13:59 評論0 收藏0

發表評論

登陸后可評論

0條評論

Cympros

男|高級講師

我要關注我要私信

TA的文章

tensorflow實現lstm

閱讀 2289·2023-04-26 00:01
Owned-Networks：便宜VPS，1核/1G/30G SSD/1T/1Gbps/KVM/可選

閱讀 795·2021-10-27 14:13
??在爬完一周的朋友圈后，我發現了.......驚人??秘密

閱讀 1810·2021-09-02 15:11
H5移動端調試—weinre

閱讀 3380·2019-08-29 12:52
總結開發過程踩到的坑（五）（小程序篇）

閱讀 527·2019-08-26 12:00
JAVASCRIPT FUNCTIONS

閱讀 2568·2019-08-26 10:57
javascript代理模式

閱讀 3405·2019-08-26 10:32
了解Webpack嗎？

閱讀 2847·2019-08-23 18:29

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

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

2.1 package.json 一覽

2.2 可用腳本命令說明：

4.1 方法一：將 webpack 配置暴露出來并進行修改

4.2 方法二：使用 react-app-rewired 對 webpack 進行自定義配置(覆蓋或添加)

5.1 一般使用方法（不推薦）

5.2 按需加載

5.3 通過 react-app-rewired 擴展 webpack 來實現 antd 自定義主題

5.4 通過插件 babel-plugin-transform-decorators-legacy 實現對修飾器的支持

6.1 通過 react-app-rewired 進行擴展配置時發現啟動項目后并沒有效果？

相關文章