摘要：譯文原文來自寫在前面使用已經(jīng)蠻長(zhǎng)一段時(shí)間但是在新項(xiàng)目開始之際都是東拼西湊其他項(xiàng)目的配置來使用如果要自己從零開始寫一個(gè)完整項(xiàng)目的配置估計(jì)得費(fèi)死勁所以在發(fā)布版本之際正是時(shí)候來認(rèn)真從零開始學(xué)習(xí)了是一個(gè)出自的庫(kù)用于構(gòu)建用戶交互界面是一個(gè)非常厲害的有

譯文,原文來自https://scotch.io/tutorials/s...
寫在前面,使用webpack已經(jīng)蠻長(zhǎng)一段時(shí)間,但是在新項(xiàng)目開始之際,都是東拼西湊其他項(xiàng)目的配置來使用,如果要自己從零開始寫一個(gè)完整項(xiàng)目的webpack配置估計(jì)得費(fèi)死勁,所以在webpack發(fā)布2.x版本之際,正是時(shí)候來認(rèn)真從零開始學(xué)習(xí)webpack了

React是一個(gè)出自facebook的js庫(kù),用于構(gòu)建用戶交互界面.是一個(gè)非常厲害的有很多優(yōu)勢(shì)的庫(kù),但是卻有著非常陡峭的學(xué)習(xí)曲線.當(dāng)我開始嘗試它,最令我困擾的是,大部分的教程都略過了React開發(fā)環(huán)境的搭建.

譯者注: 如果只針對(duì)react,你大可以不使用webpack,可以嘗試create-react-app,它幫你處理了大部分問題,本文主要使用webpack.

所以讓我們開始吧,這篇文章非常適合那些害怕沾手react開發(fā)環(huán)境所需的繁瑣的配置而常常采取東湊西拼方式的新手.我的第一個(gè)目標(biāo)就是保持這篇文章簡(jiǎn)潔易懂.我不會(huì)使用任何模板文件,并且你能在github repo上找到完整的設(shè)置.我們會(huì)使用以下技術(shù):

Webpack - 模塊打包器

Babel - javascript編譯器

ES6 - 相對(duì)較新的javascript的標(biāo)準(zhǔn)

Yarn - 包管理器

React

在這邊文章結(jié)束之前,我們將設(shè)置好一個(gè)React的開發(fā)環(huán)境以及一個(gè)簡(jiǎn)單的打印hello world的頁面.

去擁抱樂趣吧!!

在開始項(xiàng)目之前我們需要先安裝Yarn和Node到我們的機(jī)器上.

就如上面提到的,我們將使用Yarn做為包管理器.它其實(shí)和npm相當(dāng)相似,而且也提供和npm幾乎一樣的命令行工具.在此之上還有一些npm所不具備的額外的特性.或許你會(huì)感到不解,我列舉了幾個(gè)使用Yarn的主要原因 :

如果你之前已經(jīng)安裝了某個(gè)package,你能在沒有網(wǎng)絡(luò)請(qǐng)求的情況下再次安裝.意味著你能離線安裝package,并且大大減少你安裝依賴所需的時(shí)間.

任何機(jī)器安裝時(shí)都會(huì)有相同的依賴關(guān)系,意味著一個(gè)機(jī)器的運(yùn)行的安裝過程也會(huì)以同樣的方式運(yùn)行在其他機(jī)器上.

如果要了解更多的話,可以去看看Yarn的文檔.

Mac Os的用戶可以放心使用下面的命令安裝Yarn,以為我已經(jīng)為你們先行嘗試過了,使用其他操作系統(tǒng)的可以去查看Yarn的安裝說明,以便正確地安裝Yarn.

> brew update
> brew install yarn

打開你的終端創(chuàng)建一個(gè)新文件夾.你可以隨意命名這個(gè)文件夾.進(jìn)入文件夾后通過yarn init命令初始化項(xiàng)目,yarn init就像npm init一樣,會(huì)給你提示,只要不停按回車或按你的意愿配置就可以了.

> mkdir hello-world-react
> cd hello-world-react
> yarn init

當(dāng)yarn init命令完成后你能看到你的文件夾(此例中為"hello-world-react")多了一個(gè)新的文件package.json,就像npm init的執(zhí)行結(jié)果一樣.

下面我們需要安裝webpack和一些依賴.

> yarn add webpack webpack-dev-server path

可以發(fā)現(xiàn)在當(dāng)前文件夾下創(chuàng)建了一個(gè)新文件yarn.lock.Yarn用這個(gè)文件來鎖定準(zhǔn)確的依賴關(guān)系,以保證在其他機(jī)器上也能以相同的方式運(yùn)行.我們不用放心思在這個(gè)文件中因?yàn)樗亲詣?dòng)生成的.

現(xiàn)在我們已經(jīng)安裝了webpack了,我們需要一個(gè)配置文件來告訴webpack應(yīng)該要做什么.在項(xiàng)目文件夾中創(chuàng)建一個(gè)新文件webpack.config.js,然后用你喜歡的編輯器打開它.

> touch webpack.config.js

然后更改配置文件:

/*
    ./webpack.config.js
*/
const path = require("path");
module.exports = {
  entry: "./client/index.js",
  output: {
    path: path.resolve("dist"),
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      { test: /.js$/, loader: "babel-loader", exclude: /node_modules/ },
      { test: /.jsx$/, loader: "babel-loader", exclude: /node_modules/ }
    ]
  }
}

基本上,使用webpack我們需要制定一個(gè)entry入口和output輸出.

entry: 指定入口文件,即打包器開始構(gòu)建流程的地方.

output: 指定打包后的文件應(yīng)該存放的位置.

無論如何,我們同時(shí)還需要loaders.通過它們我們能讓瀏覽器能夠理解并且運(yùn)行jsx以及用ES6標(biāo)準(zhǔn)書寫的代碼.

loaders: 會(huì)把我們應(yīng)用上需要用到的文件進(jìn)行轉(zhuǎn)化.

配置中的loaders接受一個(gè)loader的數(shù)組.我們需要指定babel-loader把除去node_module文件夾以外的所有.js及.jsx文件進(jìn)行轉(zhuǎn)化.如果需要的話你總是能添加更多的loader.舉個(gè)例子,如果你項(xiàng)目有多帶帶的樣式文件(如css)需要處理,那你會(huì)需要用到CSS loader.所有的這些loaders能在webpack的文檔中找到.大方隨意去做各種嘗試吧.

我們?cè)趙ebpack配置中指明了使用babel-loader.但這個(gè)babel-loader又是從哪來呢?接下來我們就要把它下載并進(jìn)行一些設(shè)置.

> yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev

我們安裝了我們所需要的所有依賴.注意我們添加了babel-preset-es2015和babel-preset-react,presets是babel的插件,它會(huì)告訴babel需要把哪些部分轉(zhuǎn)化成原生的javascript.

然后我們需要去設(shè)置babel,設(shè)置babel可以通過添加一個(gè).babelrc文件來完成.

> touch .babelrc

然后做以下改動(dòng)

/* 
    ./.babelrc
*/  
{
    "presets":[
        "es2015", "react"
    ]
}

就這樣.當(dāng)webpack調(diào)用babel-loader時(shí)它會(huì)知道該對(duì)文件做什么處理了.

到目前為止,我們的目錄結(jié)構(gòu)是這樣的

.
|-- node_modules
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

你不覺得是時(shí)候開始添加React的支持了嗎?我們創(chuàng)建一個(gè)新文件夾client,之后再往這文件夾里面添加index.js和index.html.

> mkdir client
> cd client
> touch index.js
> touch index.html
> cd .. 

現(xiàn)在目錄結(jié)構(gòu)是這樣的

.
|-- client
     |-- index.html
     |-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

接下來讓我們寫點(diǎn)代碼吧.我們用一些簡(jiǎn)單的語句來驗(yàn)證下我們的配置是否能正確運(yùn)行吧.

編輯index.js

/*
    ./client/index.js
    which is the webpack entry file
*/
console.log("Hey guys and ladies!!")

編輯index.html

index.html會(huì)用來在瀏覽器加載并展示我們的React組件.我前面提到過我們需要babel來編譯我們的代碼以便瀏覽器運(yùn)行.我們將用ES6以及JSX語法來編寫React組件的代碼.因?yàn)檫@個(gè)兩個(gè)語法都沒有得到瀏覽器很好的支持,所以我們需要用babel-loader來幫助我們處理,而后再進(jìn)行打包輸出的結(jié)果才是我們最終在index.html加載的代碼.

要把打包完成的代碼添加到我們的html文件,其中一個(gè)方法是手動(dòng)插入一個(gè)script標(biāo)簽并指定打包后的文件的位置到src屬性.一個(gè)更加好的做法是通過一個(gè)叫html-webpack-plugin的插件幫助我們自動(dòng)完成上面的工作.這個(gè)插件提供了一個(gè)簡(jiǎn)單的方式來根據(jù)我們的html文件模板生成我們最終需要的html文件.我們只需要關(guān)心html文件模板即可,然后通過一些簡(jiǎn)單配置它就能幫我們完成script的插入.讓我們開始動(dòng)手吧.

首先我們需要安裝這個(gè)插件.在項(xiàng)目的根目錄下運(yùn)行終端.然后執(zhí)行以下命令

> yarn add html-webpack-plugin

然后編輯webpack.config.js添加一些配置.

/* 
    ./webpack.config.js
*/
const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: "./client/index.html",
  filename: "index.html",
  inject: "body"
})

module.exports = {

...

module: {
    loaders: [
        ...
    ]
},
// add this line
plugins: [HtmlWebpackPluginConfig]
}

其實(shí)配置本身已經(jīng)非常清晰了.我們導(dǎo)入了html-webpack-plugin插件,并且創(chuàng)建了一個(gè)該插件的實(shí)例,再指定template為我們的html模板.filename即是最終通過這個(gè)插件生成的html文件的文件名.inject: body告訴插件把js標(biāo)簽添加到body的結(jié)束標(biāo)簽之前.

我們快要完成了.讓我們嘗試去運(yùn)行我們的配置.在此之前先做點(diǎn)微小的工作.打開package.json并添加一個(gè)start script.

/*
    ./package.json
*/
{
  "name": "hello-world-react",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",

  // add the scripts key to your package.json

  "scripts": {
    "start": "webpack-dev-server"
  },

  "dependencies": {
  ...
  },
  "devDependencies": {
  ...
  }
}

然后我們能在終端上執(zhí)行以下命令

> yarn start

然后打開瀏覽器并訪問http://localhost:8080/,打開控制臺(tái)你應(yīng)該可以可以看出輸出"Hey guys and ladies!!".使用localhost:8080是因?yàn)?b>webpack-dev-server啟動(dòng)了一個(gè)開發(fā)服務(wù)器.注意webpack-dev-server會(huì)在我們執(zhí)行yarn start時(shí)運(yùn)行.

成功運(yùn)行了!讓我們來添加一些簡(jiǎn)單React組件看看會(huì)發(fā)生什么.

我會(huì)創(chuàng)建一個(gè)非常簡(jiǎn)單的Hello World的React組件.我們需要安裝React的依賴.

> yarn add react react-dom

接下來在client文件夾中添加一個(gè)components文件夾.并創(chuàng)建一個(gè)App.jsx.

> cd client
> mkdir components 
> cd components
> touch App.jsx
> cd ../..

現(xiàn)在我們的目錄結(jié)構(gòu)是這樣子的

.
|-- client
     |-- components
         |-- App.jsx
     |-- index.html
     |-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

React的組件命名約定俗成地使用首字母大寫的駝峰式命名規(guī)則.所以我們文件的名字也是有個(gè)大寫字母開頭.后綴既可以是jsx也可以是js.我覺得當(dāng)要使用jsx語法時(shí)最好還是明確的使用jsx作為后綴.

接下來編輯App.jsx文件

/*
    ./client/components/App.jsx
*/
import React from "react";

export default class App extends React.Component {
  render() {
    return (
     

        
Hello World
      
);
  }
}

最后為了把我們的組件渲染到我們的頁面上.把index.js的console.log替換成以下的代碼

/* 
    ./client/index.js
*/
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App.jsx";

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

打開終端再次運(yùn)行我們的項(xiàng)目,確認(rèn)終端當(dāng)前目錄為項(xiàng)目的根目錄.

> yarn start

這就對(duì)了!非常高興你完成我們一開始的目標(biāo)!!

現(xiàn)在我們已經(jīng)搭好React的開發(fā)環(huán)境了.我希望這篇教程能讓你明白這些配置是怎么一回事以及為什么我們需要這些配置.同時(shí),如果每個(gè)項(xiàng)目都需要那么多配置的話,你可以fork我的repo并以此為基礎(chǔ)來改動(dòng).

請(qǐng)大膽嘗試不同的webpack配置,如果發(fā)現(xiàn)了非常cool的東西也歡迎在評(píng)論低下留言.(譯者注: 原文地址 https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel#conclusion)

最后,在這個(gè)教程之后你能夠并且應(yīng)該嘗試去完成一個(gè)深度的React的項(xiàng)目.Wow~