設定開發React的環境


前言

有很多方式可以設定開發React所需的環境,我把目前的結果摘要放上來,但是有可能現在比較適合,之後會不會改變或還有其他更好的方式,那就不一定了。如果有錯誤或有不詳盡之處,再留言或寫信給我吧。

這篇文章主要參考了Setting Up Webpack for React and Hot Module Replacement這篇文章。其他的部份就是我一一查出所有使用的主要模組,它們在開發時扮演的角色,不過有很多新技術不是三言兩語就說得完的,只能簡單的敘述一下。

2016/05/26 Hot Reloading的部份有改用新作法,請參考設定開發React的環境 - React Hot Loader這篇 2016/04/01 多加了flux用的, style-loader, css-loader

給我5分鐘

要建立這個環境最快的方式,只需要幾分鐘(視你的連網和電腦速度而定),先下載我提供的Github庫檔案這裡面的所有資料夾和檔案,放到你要使用的專案目錄中,用命令列工具切換到這個目錄中,然後執行:

npm install

註:你要先安裝node.js,裡面有附npm程式。

註:權限不足時要先加sudo在指令前面

註:package.json中你可以先改專案名稱,我把它預設叫react-env

它就會下載與安裝所有的需要的模組,然後執行:

webpack

如果沒問題就會叭啦叭啦開始打包在src目錄裡面的範例程式,到dist目錄中。

如果你執行以下的指令,它就會啟動webpack-dev-server,可以進行動態編譯程式碼及測試用:

npm start

註:如果dist中沒產出的程式一樣可以執行使用

再用瀏覽器打開下面這個網址:

http://localhost:8080/

你就可以看到範例結果了。之後在src中進行React的開發就行了,不過程式的進入點要使用app.js這個檔案。

問題是你根本不知道這裡面裝什麼鬼,和裡面不知道設定了什麼。以下是相關模組和工具的簡單說明,或許有空時你可以自己一步步建立這個環境。

參賽隊友

雖然React本身是一套獨立的函式庫,但要搭建一個開發它的環境,可不是只用個瀏覽器加上程式碼編輯程式這麼簡單。用JSBin的線上工具,當然也可以來寫幾行範例,但你要在自己的電腦上建立開發測試環境就需要裝不少東西,對於我們這些具有遠大理想和目標的前端工程師來說,學著如何搭建開發環境是必備的技能之一。其中有幾個參加的隊友們,一個個介紹在下面,包含了專門的開發用工具和編輯程式。

webpack

React使用了CommonJS modules的技術,但這是"無法直接"在瀏覽器中使用的,必須透過一些額外的工具,這些工具稱為Javascript bundler(打包工具),才能把這些模組打包成為,可以用在網頁的<script>的js檔案。最常用的是webpackbrowserify這兩套。

webpack目前是網路上最推薦使用的,主要是它除了有browserify的功能外,還有更多進階的功能,可以支援AMD、CommonJS、或其他如Angular或ES6的格式,另外還可以取代一部份gruntgulp的功能。

webpack另外支援了Hot Module Replacement(HMR, 模組熱替換),指的是可以在運行時直接替換更動的模組機制。搭配React Hot Loader,可以加速開發的效率。

以上是來自webpack-howtoreact-howto的說法。

babel

babel是一個Javascript程式碼的編譯器,主要是因為目前大部份的瀏覽器,它們可以支援的Javascript版本,還沒達到最新版本ES2015(或稱ES6)的標準,要透過編譯器先進行與瀏覽器相容的編譯。

另外,React所使用的JSX語法,是一種"針對ECMAScript類似XML語法擴充",這個是React中自創的一種語法,想當然…瀏覽器也沒辦法直接支援,所以也要靠babel先編譯完成,然後才能在瀏覽器中執行。

babel在英文中是"巴比倫塔"的意思,據《聖經·創世記》第11章記載,當時人類聯合起來興建希望塔頂通天能傳揚己名的高塔。為了阻止人類的計劃,上帝讓人類說不同的語言,使人類相互之間不能溝通,計劃因此失敗,人類自此各散東西。

React

這是我們要使用的主要函式庫。

ESLint

ESLint是一套程式碼結構的檢查工具,它支援JSX語法與ES6語法,所以在撰寫程式碼時可以使用它來協助程式碼的檢查。ESLint也有特別出了一個針對React.js的外掛。主流的幾種開發工具都有支援的外掛。

ESLint需要設定.eslintrc來指示一些檢查的規則。我放了一個範例在Github庫中。

安裝步驟

首先當然你的電腦中要先有npm工具,這是一個Javascript套件的管理工具。node.js已經內建它了,所以安裝完node.js就有npm能用了。npm的安裝就略過。

註:Windows作業系統建議加裝Git BASH。有些指令怕Windows陽春的命令列工具並不太認得。

開始

建立一個目錄,然後執行npm初始化:

mkdir react-project && cd react-project
npm init

這個時候會產生一個package.json設定檔,先都用預設的就行了。之後你可以透過這個設定檔作一些其他的開發設定。我們之後每次在安裝時加上--save-dev,會把安裝的套件版本記錄到package.json設定檔中的devDependencies區段。

安裝webspack

webpack安裝到全域中(global),讓webpack指令可以直接使用。另外同時也安裝一份在專案用的目錄中,這樣之後可以視情況調整開發用的webpack版本。

npm install webpack --global
npm install webpack --save-dev

註:如果npm有安裝錯誤的訊息,有可能是你的權限不足,記得加sudo在最前面。

安裝babel-loader

有用到的都一起裝一裝,而且在package.json設定檔中記錄起來:

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

設定webpack與測試

建立一個webpack.config.js檔案,這是用來指示webpack要打包在哪裡的檔案,然後輸出在哪裡,檔案的內容如下:

module.exports = {
  context: __dirname + "/src",
  entry: "./app.js",

  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },
}

上面的程式碼是指示,我們寫的檔案是放在src目錄裡,以app.js為進入點(Entry)。最後輸出在dist目錄中,檔名是app.js。

設定babel-loader如下,後面還會更改一下:

loaders: [
        {
          // 只針對js與jsx檔案
          test: /\.jsx?$/,

          // 只包含`src`目錄
          include: [
            __dirname + "/src"
          ],

          exclude: /node_modules/,

          // 也可以使用'babel-loader'
          loader: 'babel',

          // 其他設定preset或plugin
           query: {
            presets: ['react', 'es2015']
           }
        }
    ]

src裡有兩個測試用的檔案,一個是app.js,裡面的內容是:

src/app.js

import ReactDOM from 'react-dom';
import React from 'react';
import Greeting from './greeting';

React.render(
  <Greeting name="World"/>,
  document.getElementById('example')
);

另一個是greeting.js,裡面的內容是:

src/greeting.js

import React from 'react';

export default React.createClass({
  render: function() {
    return (
      <div className="greeting">
        Hello, {this.props.name}!
      </div>
    );
  },
});

此時在命令列視窗中輸入以下指令,則會編譯兼打包範例程式碼檔案到dist目錄中:

webpack

安裝webpack-dev-server

webpack-dev-server是一個小型的node.js Express伺服器,它可以在有修改到程式碼時,自動進行打包的動作(不用再輸入webpack),而且它會自動重新載入,所以你也不用在瀏覽器中一直按重新載入。同樣也是安裝它在全域和這個專案中:

npm install webpack-dev-server --global
npm install webpack-dev-server --save-dev

這個時候輸入webpack-dev-server,然後在瀏覽器網址中輸入http://localhost:8080就可以看到範例的最後結果。

Hot Module Replacement(HMR, 模組熱替換)

註:react-hot-loader已經棄用,要改用react-transform-hmr

webpack-dev-server可以讓我們使用模組熱替換的功能,一樣是先安裝所需的模組套件:

npm install babel-plugin-react-transform --save-dev
npm install react-transform-hmr --save-dev

react-transform-hmr是以轉換(Transform)的方式,套入一個babel的外掛套件 - babel-plugin-react-transform中。因此我們另外在專案根目錄,新增一個獨立的.babelrc設定檔來設定,它的內容如下:

/.babelrc

{
  "presets": ["es2015", "react"],
  "env": {
    "development": {
      "plugins": [
        ["react-transform", {
          "transforms": [{
              "transform": "react-transform-hmr",
              // 如果你使用React Native,這裡要改用"react-native"
              "imports": ["react"],
              // 對Webpack HMR是很重要的
              "locals": ["module"]
            }]
            // 註: 你可以放更多transforms在陣列中
        }]
      ]
    }
  }
}

註:這個設定可以直接放在package.json裡面,如有需要請參考babelrc的說明文件

再來是在webpack.config.js的設定裡,query的部份就不用再宣告了,因為.babelrc裡已經有了:

loaders: [
      {
        // 只針對js與jsx檔案
        test: /\.jsx?$/,

        // 只包含`src`目錄
        include: [
          __dirname + "/src"
        ],

        exclude: /node_modules/,

          // 也可以使用'babel-loader'
        loader: 'babel',
      }]

之後執行webpack-dev-server指令時,要加上幾個參數:

webpack-dev-server --progress --hot --inline

註:--progress會顯示目前打包的進度,如果要打包很久時,這樣可以看它是不是有進度…

為了簡便起見,我們使用npm script來作執行的這件事,在專案用的package.json檔案,在scripts區段加以下的指令字串:

"scripts": {
  "start": "webpack-dev-server --progress --hot --inline"
},

之後就可以用npm start指令來執行。

同場加映 file-loader

file-loader也是一個webpack的loader,功能是把src中的其他檔案複製到dist目錄而已。如果你想保持在開發時,完全不去動到dist目錄中的檔案,都只撰寫到src目錄中的檔案,就加這個loader就行了。

安裝它也是很簡單的:

npm install file-loader --save-dev

然後在webpack.config.js中設定一下,首先是進入檔案中的設定:

entry: {
    javascript: "./app.js",
    html: "./index.html",
  },

再加一個loader的設定:

{
  test: /\.html$/,
  loader: "file?name=[name].[ext]",
},

我們用來在瀏覽器上打開的index.html檔案的內容:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello React</title>

  </head>
  <body>
    <div id="example"></div>
    <script src="/app.js"></script>
  </body>

</html>

你可以試試會不會把src目錄下的index.html檔案複製到dist目錄中。

番外篇: 開發工具

Sublime Text 3AtomWebStorm都是可選擇的,純看個人喜好。它們目前都有開發React專用的外掛,主要是可以高亮度語法顯示、以及支援ESLint與JSX語法檢查。相關的外掛資訊如下:

參考資料