使用 webpack 4 和 Babel 7 構(gòu)建 React 應(yīng)用及如何引入 Material D

asoren 發(fā)布于2019-08-23 15:17 / 2680人閱讀

摘要：建立項(xiàng)目首先，創(chuàng)建工程目錄現(xiàn)在我們已經(jīng)創(chuàng)建了我們要開(kāi)發(fā)應(yīng)用程序的文件夾，接著需要添加一個(gè)文件。這里為了版本的一致性，我把里的版本號(hào)前面刪除了。為此，需要?jiǎng)?chuàng)建一個(gè)名為的文件，用來(lái)配置。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

在過(guò)去的一年和一些人中，我一直在與 Creative Tim 合作。我一直在使用 create-react-app 來(lái)開(kāi)發(fā)一些不錯(cuò)的產(chǎn)品。有很多客戶(hù)詢(xún)問(wèn)如何在 Webpack 上遷移我們的產(chǎn)品模板。

在多次要求求之后，我們寫(xiě)了這個(gè)關(guān)于如何開(kāi)始使用 React with Webpack 4和 Babel 7 的小教程。在本教程的最后，將向大家展示如何在新創(chuàng)建的應(yīng)用程序上添加 Material Dashboard React。

在我們開(kāi)始之前，請(qǐng)確保你的電腦上安裝了 npm 和 Nodejs 的最新版本。在撰寫(xiě)本文時(shí)，我的電腦上的最新版本是 npm 的 6.4.1 和 Nodejs 的 8.12.0 (lts)。

建立項(xiàng)目

首先，創(chuàng)建工程目錄：

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

現(xiàn)在我們已經(jīng)創(chuàng)建了我們要開(kāi)發(fā)應(yīng)用程序的文件夾，接著需要添加一個(gè) package.json 文件。有兩種創(chuàng)建方式，你可以選擇其中的一種：

1.只需創(chuàng)建 package.json 文件，無(wú)需任何其他配置：

npm init -y

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

2.使用一些額外的配置設(shè)置創(chuàng)建 package.json 文件

npm init

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

之后，在根目錄下創(chuàng)建 src 文件夾，然后在 src 下分別創(chuàng)建 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

創(chuàng)建完后在 index.html 添加以下內(nèi)容。



  
    
    
    
    React Tutorial

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

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

此時(shí)，目錄結(jié)構(gòu)如下：

將 Webpack 添加到項(xiàng)目中

安裝 Webapck 及所需的開(kāi)發(fā)環(huán)境依賴(lài)模塊。

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

webpack

用來(lái)配置我們的新應(yīng)用

本文所用的版本是 4.19.0

webpack-cli

可以在命令行中使用 Webpack 了

本文所用的版本是 3.1.0

webpack-dev-server

這樣，當(dāng)我們對(duì)新應(yīng)用程序中的文件進(jìn)行更改時(shí)，就不需要刷新頁(yè)面了。每當(dāng)我們?cè)趹?yīng)用程序中更改文件時(shí)，它會(huì)自動(dòng)刷新瀏覽器頁(yè)面

本文所用的版本是 3.1.8

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

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

補(bǔ)充說(shuō)明一下版本號(hào)前的 ^,~ 的區(qū)別

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

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

^ 指定版本：比如 "webpack-dev-server": "^3.1.8",，表示安裝 請(qǐng)輸入代碼3.1.4 及以上的版本，但是不安裝4.0.0，也就是說(shuō)安裝時(shí)不改變大版本號(hào)。

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

所以當(dāng)我們 npm install 安裝完插件后，都會(huì)生成兩個(gè)文件一個(gè)是 node_modules 和 package-lock.json 。

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

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

1.Linux/MacOS 命令

touch webpack.config.js

2.Windows 命令

echo "" > webpack.config.js

如果你不想使用命令行，也可以簡(jiǎn)單地手動(dòng)創(chuàng)建文件。

在開(kāi)始處理 Webpack 配置文件之前，先在應(yīng)用程序中安裝一些我們需要的東西。

首先安裝 path 作為開(kāi)發(fā)環(huán)境的路徑依賴(lài)。

npm install --save-dev path

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

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

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

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

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

現(xiàn)在 package.json 內(nèi)容如下：

{
  "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"
  }
}

接著運(yùn)行以下命令，看看會(huì)發(fā)生什么：

npm run webpack

Webpack 將自動(dòng)獲取 src/index.js 文件，編譯它，并將其輸出到 dist/main.js 中，并壓縮代碼。這是因?yàn)槲覀冞€沒(méi)有配置 Webpack 配置文件。此外，由于我們還沒(méi)有配置該文件，我控制臺(tái)中將出現(xiàn)一些警告。

如果我們運(yùn)行如下命令：

npm start

webpack-dev-server 將自動(dòng)啟動(dòng)服務(wù)器并使用該服務(wù)器打開(kāi)默認(rèn)瀏覽器。但是，由于我們沒(méi)有配置webpack.config.js 文件，所以頁(yè)面展示并不是我們想要的內(nèi)容。

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

接著在 webpack.config.js 添加以下內(nèi)容：

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 可以是個(gè)字符串或數(shù)組或者是對(duì)象。當(dāng) entry 是個(gè)字符串的時(shí)候，用來(lái)定義入口文件：

entry: "./js/main.js"

當(dāng) entry 是個(gè)數(shù)組的時(shí)候，里面同樣包含入口js文件，另外一個(gè)參數(shù)可以是用來(lái)配置webpack提供的一個(gè)靜態(tài)資源服務(wù)器，webpack-dev-server。webpack-dev-server 會(huì)監(jiān)控項(xiàng)目中每一個(gè)文件的變化，實(shí)時(shí)的進(jìn)行構(gòu)建，并且自動(dòng)刷新頁(yè)面：

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

當(dāng) entry 是個(gè)對(duì)象的時(shí)候，我們可以將不同的文件構(gòu)建成不同的文件，按需使用，比如在我的 hello 頁(yè)面中只要引入 hello.js 即可：

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

2.output

output 參數(shù)是個(gè)對(duì)象，用于定義構(gòu)建后的文件的輸出。其中包含 path 和 filename：

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

3.mode

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

"webpack": "NODE_ENV=production webpack",

4.resolve

webpack 在構(gòu)建包的時(shí)候會(huì)按目錄的進(jìn)行文件的查找，resolve 屬性中的 extensions 數(shù)組中用于配置程序可以自行補(bǔ)全哪些文件后綴：

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

5.devServer

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

6.plugins

在這里，我們?cè)O(shè)置了我們的應(yīng)用程序中需要的插件。到目前為止，只需要 html-webpack-plugin，它告訴服務(wù)器 index.bundl.js 應(yīng)該被注入到 index.html 文件中

再次運(yùn)行以下命令，顯示會(huì)跟上一次不同：

npm run webpack

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

配置 React，Babel 與 styles loaders

通過(guò)運(yùn)行以下命令來(lái)引入 React :

npm i react react-dom --save-dev

在我們的開(kāi)發(fā)過(guò)程中，如果我們?cè)?JS 文件中添加React代碼，Webpack 會(huì)給我們一個(gè)錯(cuò)誤，它不知道如何在bundle.js 文件中編譯 React。

修改 index.js 內(nèi)容如下：

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

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

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

再次運(yùn)行以下命令：

npm start

錯(cuò)誤如下：

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

安裝 Babel 相關(guān)依賴(lài)：

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 環(huán)境中，直接運(yùn)行 es2015 的代碼，而不需要額外進(jìn)行轉(zhuǎn)碼。例如我們有一個(gè) js 文件以 es2015 的語(yǔ)法進(jìn)行編寫(xiě)(如使用了箭頭函數(shù))。我們可以直接使用 babel-node es2015.js 進(jìn)行執(zhí)行，而不用再進(jìn)行轉(zhuǎn)碼了。

可以說(shuō)：babel-node = babel-polyfill + babel-register

@babel/preset-react

這個(gè)是把 React 代碼編譯成 ES5 代碼。

babel-loader

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

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

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

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

我們需要為項(xiàng)目中添加一些樣式，此時(shí)就需要使用樣式相關(guān)的加載器，這邊使用 scss,安裝命令如下：

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

style-loader

通過(guò)注入

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用 webpack 4 和 Babel 7 構(gòu)建 React 應(yīng)用及如何引入 Material D

Hello there World!

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用 webpack 4 和 Babel 7 構(gòu)建 React 應(yīng)用及如何引入 Material D

Hello there World!

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！