詳細解答Webpack+Babel+React環境搭建（詳細教學）-js教程-PHP中文網

首頁

web前端

js教程

詳細解答Webpack+Babel+React環境搭建（詳細教學）

亚连

Jun 12, 2018 pm 05:59 PM

babelreactwebpack

本篇文章主要介紹了詳解Webpack Babel React開發環境的搭建的方法步驟，具有一定的參考價值，感興趣的小伙伴們可以參考一下

1.認識Webpack

構建應用程式前我們先來了解Webpack, Webpack是一個模組打包工具，能夠把各種檔案（例如：ReactJS、Babel、Coffeescript、Less/Sass等）當作模組進行編譯後進行打包。

2.安裝Webpack

要開始使用Webpack在專案中進行開發前我們首先需要在全域環境中安裝。

npm install webpack -g

3.創建一個專案

安裝好後創建一個名叫learn-webpack的專案並進入該專案資料夾，當然專案名字可以起你自己想要的名字。

mkdir learn-webpack && cd learn-webpack

透過編輯器找到你剛剛建立的專案資料夾

#現在我們來建立2個檔案:

app. js

document.querySelector(&#39;#app&#39;).innerHTML = &#39;Hello World!&#39;;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Learn-webpack</title>
</head>
<body>
 <p id="app"></p>
 <script src="dist/bundle.js"></script>
</body>
</html>

然後在終端執行

webpack ./app.js ./dist/bundle.js

#最後執行啟動本機的http服務

python -m SimpleHTTPServer

這時候你就可以在瀏覽器輸入:http://localhost:8000

如果你能在瀏覽器裡面看到Hello world!那表示你已經成功的利用Webpack把main.js打包並編譯到了bundle.js.是不是很簡單？

定義一個設定檔

上面的只是對Webpack的使用進行了一些簡單的介紹，實際上每個專案下都應該包含一個webpack.config. js，用來告訴Webpack需要做些什麼。

module.exports = {
 entry: "app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 }
}

現在在終端機中執行：webpack

看看是不是跟之前輸入 webpack ./app.js ./dist/bundle.js 的打包編譯結果。

entry：指定打包的入口文件

1.單一文件打包為單一輸出文件，直接寫該文件的名字，例如：entry:"main.js "

2.多個檔案打包為單一輸出文件，將檔案名稱放進一個數組，例如：entry:['main.js','xx.js']

3 .多個文件打包為多個輸出文件，將文件名放入一個鍵字對，例如：entry: {a:'main.js',b:'xx.js'}

output：設定打包結果

path為定義輸出資料夾，filename為打包結果檔案的名稱，如果指定打包入口檔案為上面的1、2種情況，filename裡面直接跟你想輸出的檔名。若為第3種情況filename裡面需寫成[name].檔名.js，filename裡面的[name]為entry中的鍵。

監聽變化自動打包

當我們在不停的對程式碼進行變動的時候，為了不修改一次然後又手動去進行打包一次。可以使用webpack的watch功能。

webpack --watch 或webpack -w

或可以直接在設定碼裡面把watch設定為true

module.exports = {
 entry: "app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 },
 watch: true
}

4.使用Babel

Babel是什麼？ Babel 是 JavaScript 編譯器。使用它可以將ES6的語法轉換為ES5的語法，以便在現在有的環境中執行。

在終端執行:npm install webpack babel-loader babel-core babel-preset-es2015 --save-dev

執行安裝完成後需要將先前的webpack.config.js修改為:

module.exports = {
 entry: "./app.js",
 output: {
  path: __dirname+"/dist",
  filename: "bundle.js"
 },
 module: {
  loaders: [
   {
    test: /\.jsx?$/,
    loader: &#39;babel-loader&#39;,
    exclude: /node_modules/,
    query: {
     presets: [&#39;es2015&#39;]
    }
   }
  ]
 },
 resolve: {
  extensions: [&#39;&#39;,&#39;.coffee&#39;,&#39;.js&#39;]
 }
}

現在就能在檔案裡面以ES6的語法進行程式碼編寫，我們來測試一下，在app.js加入:

var func = str => {
 console.log(str);
};
func(&#39;我现在在使用Babel!&#39;);

ES6支援用箭頭方式來定義函數，如果你能在控制台看到「我現在在使用Babel!」的列印文字，說明我們的Babel模組安裝成功，可以開始使用ES6進行程式碼編寫了。

loaders項目裡面表示用來載入這種類型的資源的loader。

test，是一段正規則，表示進行比對的資源型別。

exclude為指定應該被忽略的文件，我們在這裡指定了/node_modules/。

query有2種寫法, 一種是直接以字串形式跟在loader名後：

loader: &#39;babel-loader?presets[]=es2015

另一種如本文所示：

query: {
 presets: [&#39;es2015&#39;]
}

resolve. extensions 用於指明程式自動補全識別哪些後綴,

注意一下, extensions 第一個是空字串! 對應不需要後綴的情況.

5.結合React

我們已經對Webpack和Babel進行了設定並做了一些介紹，基本的環境已經建置好了，現在我們開始在使用React。

終端機輸入以下程式碼對react和react-dom進行安裝

npm install react react-dom --save

Babel針對React的所有的預設插件

npm install babel-preset-react --save-dev

由於我們增加了react的預設插件，所以需要對webpack.config.js進行修改。

將module -> loaders下面的query修改如下：

query: {
  presets: [&#39;es2015&#39;,&#39;react&#39;]
}

現在建立一個名為hello.js的檔案

import React from "react";

class Hello extends React.Component{
 render() {
  return (
   <p>
     Hello, World!
   </p>
  )
 }
}

export default Hello;

然後將app.js裡面的文件修改如下：

import React from "react";
import ReactDOM from "react-dom";
import Hello from "./hello";

// var func = str => {
//  console.log(str);
// };
//
// func('我现在在使用Babel!');
// document.querySelector(&#39;#app&#39;).innerHTML = &#39;Hello World!&#39;;

ReactDOM.render(
 ,
 document.querySelector('#app')
);

如果你能在浏览器里面看到 "Hello, React!"，就说明我们已经将Webpack+Babel+React的环境搭建好了，接下来我们就可以此基础上来进行开发了。

上面是我整理给大家的，希望今后会对大家有帮助。

如何解决vue 更改计算属性后select选中值不更改的问题，具体操作如下

如何解决iview 的select下拉框选项错位的问题，具体操作如下

如何通过Vue.js实现select下拉列表，具体操作如下

以上是詳細解答Webpack+Babel+React環境搭建（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。