使用 webpack 4 和 Babel 7 構建 React 應用及如何引入 Material D

asoren 發布于2019-08-23 15:17 / 2676人閱讀

摘要：建立項目首先，創建工程目錄現在我們已經創建了我們要開發應用程序的文件夾，接著需要添加一個文件。這里為了版本的一致性，我把里的版本號前面刪除了。為此，需要創建一個名為的文件，用來配置。

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！

在過去的一年和一些人中，我一直在與 Creative Tim 合作。我一直在使用 create-react-app 來開發一些不錯的產品。有很多客戶詢問如何在 Webpack 上遷移我們的產品模板。

在多次要求求之后，我們寫了這個關于如何開始使用 React with Webpack 4和 Babel 7 的小教程。在本教程的最后，將向大家展示如何在新創建的應用程序上添加 Material Dashboard React。

在我們開始之前，請確保你的電腦上安裝了 npm 和 Nodejs 的最新版本。在撰寫本文時，我的電腦上的最新版本是 npm 的 6.4.1 和 Nodejs 的 8.12.0 (lts)。

建立項目

首先，創建工程目錄：

mkdir react-webpack-babel-tutorial
cd react-webpack-babel-tutorial

現在我們已經創建了我們要開發應用程序的文件夾，接著需要添加一個 package.json 文件。有兩種創建方式，你可以選擇其中的一種：

1.只需創建 package.json 文件，無需任何其他配置：

npm init -y

如下所示，package.json 文件已創建，其中包含一些非常基本的信息。

2.使用一些額外的配置設置創建 package.json 文件

npm init

我在我們新創建的 package.json 文件中添加了一些東西，比如一些很好的 keywords，一個repo等等...

之后，在根目錄下創建 src 文件夾，然后在 src 下分別創建 index.html 和 index.js.

1.Linux / MacOS 命令

mkdir src
touch src/index.html
touch src/index.js

2.Windows 命令

mkdir src
echo "" > srcindex.html
echo "" > srcindex.js

創建完后在 index.html 添加以下內容。



  
    
    
    
    React Tutorial

接著在 index.js 中添加一些內容，目前只是為了展示一些內容，下面繼續完善。

(function () {
  console.log("hey mister");
}());

此時，目錄結構如下：

將 Webpack 添加到項目中

安裝 Webapck 及所需的開發環境依賴模塊。

npm install --save-dev webpack webpack-cli webpack-dev-server

webpack

用來配置我們的新應用

本文所用的版本是 4.19.0

webpack-cli

可以在命令行中使用 Webpack 了

本文所用的版本是 3.1.0

webpack-dev-server

這樣，當我們對新應用程序中的文件進行更改時，就不需要刷新頁面了。每當我們在應用程序中更改文件時，它會自動刷新瀏覽器頁面

本文所用的版本是 3.1.8

看一下package.json文件，將看到這三個包被添加到這個文件中，如下所示：

"devDependencies": {
  "webpack": "^4.19.0",
  "webpack-cli": "^3.1.0",
  "webpack-dev-server": "^3.1.8"
}

補充說明一下版本號前的 ^,~ 的區別

指定版本：比如"webpack": "4.19.0"，表示安裝 4.19.0 的版本

波浪號 ~ 指定版本：比如 "webpack-cl": "~3.1.0",表示安裝 3.1.0 的最新版本（不低于1.1.0），但是不安裝 1.2.x，也就是說安裝時不改變大版本號和次要版本號

^ 指定版本：比如 "webpack-dev-server": "^3.1.8",，表示安裝 請輸入代碼3.1.4 及以上的版本，但是不安裝4.0.0，也就是說安裝時不改變大版本號。

package.json 文件只能鎖定大版本，也就是版本號的第一位，并不能鎖定后面的小版本，你每次 npm install 都是拉取的該大版本下的最新的版本，為了穩定性考慮我們幾乎是不敢隨意升級依賴包的，這將導致多出來很多工作量，測試/適配等，所以 package-lock.json 文件出來了，當你每次安裝一個依賴的時候就鎖定在你安裝的這個版本。

所以當我們 npm install 安裝完插件后，都會生成兩個文件一個是 node_modules 和 package-lock.json 。

這里為了版本的一致性，我把 package.json 里的版本號前面 ^ 刪除了。

接著新建 Webpack 配置文件 webpack.config.js：

1.Linux/MacOS 命令

touch webpack.config.js

2.Windows 命令

echo "" > webpack.config.js

如果你不想使用命令行，也可以簡單地手動創建文件。

在開始處理 Webpack 配置文件之前，先在應用程序中安裝一些我們需要的東西。

首先安裝 path 作為開發環境的路徑依賴。

npm install --save-dev path

此外，由于不想在 HTML 中手動注入 index.js 文件，因此需要安裝 html-webpack-plugin 的插件。此插件通過配置在 HTML 文件中注入 index.js，無需手動操作。

npm install --save-dev html-webpack-plugin

再次，我將 package.json 文件刪除所有 ^。

安裝完后在 package.json 文件中的 scripts 屬性里添加以為內容：

"webpack": "webpack",
"start": "webpack-dev-server --open"

現在 package.json 內容如下：

{
  "name": "react-webpack-babel-tutorial",
  "version": "1.0.0",
  "description": "This is a Tutorial to showcase the usage of React with Webpack and Babel",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "webpack": "webpack",
    "start": "webpack-dev-server --open"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/creativetimofficial/react-webpack-babel-tutorial.git"
  },
  "keywords": [
    "react",
    "webpack",
    "babel",
    "creative-tim",
    "material-design"
  ],
  "author": "Creative Tim  (https://www.creative-tim.com/)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/creativetimofficial/react-webpack-babel-tutorial/issues"
  },
  "homepage": "https://github.com/creativetimofficial/react-webpack-babel-tutorial#readme",
  "devDependencies": {
    "html-webpack-plugin": "3.2.0",
    "path": "0.12.7",
    "webpack": "4.19.0",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.8"
  }
}

接著運行以下命令，看看會發生什么：

npm run webpack

Webpack 將自動獲取 src/index.js 文件，編譯它，并將其輸出到 dist/main.js 中，并壓縮代碼。這是因為我們還沒有配置 Webpack 配置文件。此外，由于我們還沒有配置該文件，我控制臺中將出現一些警告。

如果我們運行如下命令：

npm start

webpack-dev-server 將自動啟動服務器并使用該服務器打開默認瀏覽器。但是，由于我們沒有配置webpack.config.js 文件，所以頁面展示并不是我們想要的內容。

如果想停止服務，只需在命令行中同時按下 CTRL + C 鍵。

接著在 webpack.config.js 添加以下內容：

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname,"src","index.js"),
  output: {
    path: path.join(__dirname,"build"),
    filename: "index.bundle.js"
  },
  mode: process.env.NODE_ENV || "development",
  resolve: {
    modules: [path.resolve(__dirname, "src"), "node_modules"]
  },
  devServer: {
    contentBase: path.join(__dirname,"src")
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname,"src","index.html")
    })
  ]
};

1.entry

entry 可以是個字符串或數組或者是對象。當 entry 是個字符串的時候，用來定義入口文件：

entry: "./js/main.js"

當 entry 是個數組的時候，里面同樣包含入口js文件，另外一個參數可以是用來配置webpack提供的一個靜態資源服務器，webpack-dev-server。webpack-dev-server 會監控項目中每一個文件的變化，實時的進行構建，并且自動刷新頁面：

entry: [
     "webpack/hot/only-dev-server",
     "./js/app.js"
]

當 entry 是個對象的時候，我們可以將不同的文件構建成不同的文件，按需使用，比如在我的 hello 頁面中只要引入 hello.js 即可：

 entry: {
     hello: "./js/hello.js",
     form: "./js/form.js"
 }

2.output

output 參數是個對象，用于定義構建后的文件的輸出。其中包含 path 和 filename：

output: {
     path: "./build",
     filename: "bundle.js"
 }

3.mode

這是輸出的模式，這里將其 mode 設置為 “development”。如果在腳本中指定 NODE_ENV 變量，那么它將使用這個變量。請參閱下面關于如何使用 NODE_ENV 的示例(請注意，本教程中的 package.json 文件中不會進行以下更改，這只是一個示例，可以看到它是如何工作的）

"webpack": "NODE_ENV=production webpack",

4.resolve

webpack 在構建包的時候會按目錄的進行文件的查找，resolve 屬性中的 extensions 數組中用于配置程序可以自行補全哪些文件后綴：

resolve:{
  extensions:["",".js",".json"]
}

5.devServer

這告訴 webpack-dev-server 需要提供哪些文件。這里是 src 文件夾中的所有內容都需要在瀏覽器中瀏覽。

6.plugins

在這里，我們設置了我們的應用程序中需要的插件。到目前為止，只需要 html-webpack-plugin，它告訴服務器 index.bundl.js 應該被注入到 index.html 文件中

再次運行以下命令，顯示會跟上一次不同：

npm run webpack

webpack-dev-server 從 src 文件夾中讀取所有內容并輸出到我們的瀏覽器中。

配置 React，Babel 與 styles loaders

通過運行以下命令來引入 React :

npm i react react-dom --save-dev

在我們的開發過程中，如果我們在 JS 文件中添加React代碼，Webpack 會給我們一個錯誤，它不知道如何在bundle.js 文件中編譯 React。

修改 index.js 內容如下：

import React from "react";
import ReactDOM from "react-dom";

let HelloWorld = () => {
  return Hello there World!
}

ReactDOM.render(
  ,
  document.getElementById("root")
);

再次運行以下命令：

npm start

錯誤如下：

所以這就是 Babel 出現的原因， Babel 將告訴 Webpack 如何編譯 React 代碼。

安裝 Babel 相關依賴：

npm install --save-dev @babel/core @babel/node @babel/preset-env @babel/preset-react babel-loader

@babel/core

這是將ES6及以上版本編譯成ES5

@babel/node

babel-node 是 babel-cli 的一部分，它不需要多帶帶安裝。

它的作用是在 node 環境中，直接運行 es2015 的代碼，而不需要額外進行轉碼。例如我們有一個 js 文件以 es2015 的語法進行編寫(如使用了箭頭函數)。我們可以直接使用 babel-node es2015.js 進行執行，而不用再進行轉碼了。

可以說：babel-node = babel-polyfill + babel-register

@babel/preset-react

這個是把 React 代碼編譯成 ES5 代碼。

babel-loader

和 babel-cli 一樣，babel-loader 也會讀取 .babelrc 或者 package.json 中的 babel 段作為自己的配置，之后的內核處理也是相同。唯一比 babel-cli 復雜的是，它需要和 webpack 交互，因此需要在 webpack 這邊進行配置。比較常見的如下：

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: "babel-loader"
    }
  ]
}

如果想在這里傳入 babel 的配置項，也可以把改成：

// loader: "babel-loader" 改成如下：
use: {
  loader: "babel-loader",
  options: {
    // 配置項在這里
  }
}

我們需要為項目中添加一些樣式，此時就需要使用樣式相關的加載器，這邊使用 scss,安裝命令如下：

npm install --save-dev style-loader css-loader sass-loader node-sass

style-loader

通過注入

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

資訊專欄INFORMATION COLUMN

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

使用 webpack 4 和 Babel 7 構建 React 應用及如何引入 Material D

Hello there World!