如何搭建Webpack+Babel+React開發(fā)環(huán)境-創(chuàng)新互聯(lián)

這篇文章主要介紹了如何搭建Webpack+Babel+React開發(fā)環(huán)境，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計，網(wǎng)站模板，微信公眾號開發(fā)，軟件開發(fā)，成都小程序開發(fā)，十余年建站對門窗定制等多個行業(yè)，擁有豐富的網(wǎng)站維護經(jīng)驗。

1.認識Webpack

構(gòu)建應(yīng)用前我們先來了解一下Webpack, Webpack是一個模塊打包工具，能夠把各種文件（例如：ReactJS、Babel、Coffeescript、Less/Sass等）作為模塊進行編譯后進行打包。

2.安裝Webpack

要開始使用Webpack在項目中進行開發(fā)前我們首先需要在全局環(huán)境中進行安裝。

npm install webpack -g

3.創(chuàng)建一個項目

安裝好后創(chuàng)建一個名叫l(wèi)earn-webpack的項目并進入該項目文件夾，當(dāng)然項目名字你可以起你自己想要的名字。

mkdir learn-webpack && cd learn-webpack

通過編輯器找到你剛剛所創(chuàng)建的項目文件夾

如何搭建Webpack+Babel+React開發(fā)環(huán)境

現(xiàn)在我們來創(chuàng)建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>
 <div id="app"></div>
 <script src="dist/bundle.js"></script>
</body>
</html>

然后在終端執(zhí)行

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

如何搭建Webpack+Babel+React開發(fā)環(huán)境

最后執(zhí)行啟動本地的http服務(wù)

python -m SimpleHTTPServer

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

如何搭建Webpack+Babel+React開發(fā)環(huán)境

如果你能在瀏覽器里面看到Hello world!那說明你已經(jīng)成功的利用Webpack把main.js打包并編譯到了bundle.js.是不是很簡單？

定義一個配置文件

上面的只是對Webpack的使用進行了一些簡單的介紹，實際上每個項目下都應(yīng)該包含一個webpack.config.js，用來告訴Webpack需要做些什么。

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

現(xiàn)在在終端中運行：webpack

看看是不是和之前輸入 webpack ./app.js ./dist/bundle.js 的打包編譯結(jié)果一樣。

entry：指定打包的入口文件

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

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

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

output：配置打包結(jié)果

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

監(jiān)聽變化自動打包

當(dāng)我們在不停的對代碼進行變動的時候，為了不修改一次然后又手動去進行打包一次。可以使用webpack的watch功能。

webpack --watch 或者 webpack -w

或者可以直接在配置代碼里面把watch設(shè)置為true

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

4.使用Babel

Babel是什么？Babel 是一個 JavaScript 編譯器。使用它可以將ES6的語法轉(zhuǎn)換為ES5的語法，以便在現(xiàn)在有的環(huán)境執(zhí)行。

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

執(zhí)行安裝完成后需要將之前的webpack.config.js修改為:

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

現(xiàn)在就能在文件里面以ES6的語法進行代碼編寫，我們來測試一下，在app.js加入:

var func = str => {
 console.log(str);
};
func('我現(xiàn)在在使用Babel!');

ES6支持用箭頭方式來定義函數(shù)，如果你能在控制臺看到“我現(xiàn)在在使用Babel!”的打印文字，說明我們的Babel模塊安裝成功，可以開始使用ES6進行代碼編寫了。

loaders項里面表示用來加載這種類型的資源的loader。

test，是一段正則，表示進行匹配的資源類型。

exclude為指定應(yīng)該被忽略的文件，我們在這兒指定了/node_modules/。

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

loader: 'babel-loader?presets[]=es2015

另一種如本文所示：

query: {
 presets: ['es2015']
}

resolve.extensions 用于指明程序自動補全識別哪些后綴,

注意一下, extensions 第一個是空字符串! 對應(yīng)不需要后綴的情況.

5.結(jié)合React

前面我們已經(jīng)對Webpack和Babel進行了配置并做了一些介紹，基本的環(huán)境已經(jīng)搭建好了，現(xiàn)在我們開始在使用React。

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

npm install react react-dom --save

Babel針對React的所有的預(yù)設(shè)插件

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

由于我們增加了react的預(yù)設(shè)插件，所以需要對webpack.config.js進行修改。

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

query: {
  presets: ['es2015','react']
}

現(xiàn)在創(chuàng)建一個名為hello.js的文件

import React from "react";

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

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('我現(xiàn)在在使用Babel!');
// document.querySelector('#app').innerHTML = 'Hello World!';

ReactDOM.render(
 <Hello />,
 document.querySelector('#app')
);

如果你能在瀏覽器里面看到 "Hello, React!"，就說明我們已經(jīng)將Webpack+Babel+React的環(huán)境搭建好了，接下來我們就可以此基礎(chǔ)上來進行開發(fā)了。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何搭建Webpack+Babel+React開發(fā)環(huán)境”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文標(biāo)題：如何搭建Webpack+Babel+React開發(fā)環(huán)境-創(chuàng)新互聯(lián)
文章URL：http://www.muchs.cn/article12/ejhdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、品牌網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、ChatGPT、網(wǎng)站改版、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容