首頁 > web前端 > js教程 > 主體

Webpack、Babel、React開發環境的搭建教學

小云云
發布: 2018-01-11 09:27:02
原創
1315 人瀏覽過

本文主要介紹了詳解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('#app').innerHTML = 'Hello World!';
登入後複製

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的环境搭建好了,接下来我们就可以此基础上来进行开发了。

相关推荐:

React Native 搭建开发环境详解

如何使用Docker部署PHP开发环境

详解php多人开发环境原理

以上是Webpack、Babel、React開發環境的搭建教學的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!