摘要：譯文原文來自寫在前面使用已經蠻長一段時間但是在新項目開始之際都是東拼西湊其他項目的配置來使用如果要自己從零開始寫一個完整項目的配置估計得費死勁所以在發布版本之際正是時候來認真從零開始學習了是一個出自的庫用于構建用戶交互界面是一個非常厲害的有

譯文,原文來自https://scotch.io/tutorials/s...
寫在前面,使用webpack已經蠻長一段時間,但是在新項目開始之際,都是東拼西湊其他項目的配置來使用,如果要自己從零開始寫一個完整項目的webpack配置估計得費死勁,所以在webpack發布2.x版本之際,正是時候來認真從零開始學習webpack了

React是一個出自facebook的js庫,用于構建用戶交互界面.是一個非常厲害的有很多優勢的庫,但是卻有著非常陡峭的學習曲線.當我開始嘗試它,最令我困擾的是,大部分的教程都略過了React開發環境的搭建.

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

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

Webpack - 模塊打包器

Babel - javascript編譯器

ES6 - 相對較新的javascript的標準

Yarn - 包管理器

React

在這邊文章結束之前,我們將設置好一個React的開發環境以及一個簡單的打印hello world的頁面.

去擁抱樂趣吧!!

在開始項目之前我們需要先安裝Yarn和Node到我們的機器上.

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

如果你之前已經安裝了某個package,你能在沒有網絡請求的情況下再次安裝.意味著你能離線安裝package,并且大大減少你安裝依賴所需的時間.

任何機器安裝時都會有相同的依賴關系,意味著一個機器的運行的安裝過程也會以同樣的方式運行在其他機器上.

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

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

> brew update
> brew install yarn

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

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

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

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

> yarn add webpack webpack-dev-server path

可以發現在當前文件夾下創建了一個新文件yarn.lock.Yarn用這個文件來鎖定準確的依賴關系,以保證在其他機器上也能以相同的方式運行.我們不用放心思在這個文件中因為它是自動生成的.

現在我們已經安裝了webpack了,我們需要一個配置文件來告訴webpack應該要做什么.在項目文件夾中創建一個新文件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我們需要制定一個entry入口和output輸出.

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

output: 指定打包后的文件應該存放的位置.

無論如何,我們同時還需要loaders.通過它們我們能讓瀏覽器能夠理解并且運行jsx以及用ES6標準書寫的代碼.

loaders: 會把我們應用上需要用到的文件進行轉化.

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

我們在webpack配置中指明了使用babel-loader.但這個babel-loader又是從哪來呢?接下來我們就要把它下載并進行一些設置.

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

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

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

> touch .babelrc

然后做以下改動

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

就這樣.當webpack調用babel-loader時它會知道該對文件做什么處理了.

到目前為止,我們的目錄結構是這樣的

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

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

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

現在目錄結構是這樣的

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

接下來讓我們寫點代碼吧.我們用一些簡單的語句來驗證下我們的配置是否能正確運行吧.

編輯index.js

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

編輯index.html

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

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

首先我們需要安裝這個插件.在項目的根目錄下運行終端.然后執行以下命令

> 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]
}

其實配置本身已經非常清晰了.我們導入了html-webpack-plugin插件,并且創建了一個該插件的實例,再指定template為我們的html模板.filename即是最終通過這個插件生成的html文件的文件名.inject: body告訴插件把js標簽添加到body的結束標簽之前.

我們快要完成了.讓我們嘗試去運行我們的配置.在此之前先做點微小的工作.打開package.json并添加一個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": {
  ...
  }
}

然后我們能在終端上執行以下命令

> yarn start

然后打開瀏覽器并訪問http://localhost:8080/,打開控制臺你應該可以可以看出輸出"Hey guys and ladies!!".使用localhost:8080是因為webpack-dev-server啟動了一個開發服務器.注意webpack-dev-server會在我們執行yarn start時運行.

成功運行了!讓我們來添加一些簡單React組件看看會發生什么.

我會創建一個非常簡單的Hello World的React組件.我們需要安裝React的依賴.

> yarn add react react-dom

接下來在client文件夾中添加一個components文件夾.并創建一個App.jsx.

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

現在我們的目錄結構是這樣子的

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

React的組件命名約定俗成地使用首字母大寫的駝峰式命名規則.所以我們文件的名字也是有個大寫字母開頭.后綴既可以是jsx也可以是js.我覺得當要使用jsx語法時最好還是明確的使用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"));

打開終端再次運行我們的項目,確認終端當前目錄為項目的根目錄.

> yarn start

這就對了!非常高興你完成我們一開始的目標!!

現在我們已經搭好React的開發環境了.我希望這篇教程能讓你明白這些配置是怎么一回事以及為什么我們需要這些配置.同時,如果每個項目都需要那么多配置的話,你可以fork我的repo并以此為基礎來改動.

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

最后,在這個教程之后你能夠并且應該嘗試去完成一個深度的React的項目.Wow~