進階操作

近年來隨著 Node.js 的發展及 Open Source 社群的貢獻，有越來越多好用且方便的開發工具：

套件工具：npm、bower...
任務工具：gulp、grunt...
打包工具：webpack、browserify...
框架工具：yeoman...
其他：express、browsersync...

善加使用這些工具可加速整體開發進度。

以下將以 webpack 為例，介紹如何使用打包工具來加速 React 的開發。

webpack

webpack 是個打包工具，並且支援各種類型的資源載入器(loader)，可用來載入 javascript、css、html、image…等資源，並封裝成單一javascript檔，透過載入器結合預處理器 (preprocessor) 的輔助，一些特定類型資源可在封裝過程中預先被編譯及轉換。

babel

babel 是一個 Javascript 的編譯器，用來編譯新一代的 ECMAScript 語法及 JSX 語法。

使用方式

準備

透過 npm 指令安裝 react、webpack、webpack-dev-server、babel-loader

npm install webpack -g
npm install webpack webpack-dev-server babel-loader --save-dev
npm install react --save

資料夾目錄如下：

/app
- main.js
- HelloWorld.js
/build
- index.html
package.json
webpack.config.js

main.js

import React from 'react';
import HelloWorld from './HelloWorld.js'

setInterval(() => {
    React.render(
        <HelloWorld date={new Date()} />,
        document.getElementById('example')
    );
}, 500);

HelloWorld.js

import React from 'react';

export default React.createClass({
    render: function() {
        return (
            <p>
                Hello, <input type="text" placeholder="Your name here" />!
                It is {this.props.date.toTimeString()}
            </p>
        );
    }
});

webpack.config.js

var path = require('path');

module.exports = {
    entry: [
        "webpack/hot/dev-server",
        path.resolve(__dirname, 'app/main.js')
    ],

    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },

    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['babel']
        }]
    }
};

打包的進入點是 app/main.js，透過 webpack 打包後會產生 build.js。
webpack/hot/dev-server 是開發時用來執行 live-reload 功能。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
</head>
<body>
<div id="example"></div>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="bundle.js"></script>
</body>
</html>

package.json

{
  "name": "react-test",
  "version": "0.0.0",
  "description": "react test",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --content-base build/ --hot"
  },
  "devDependencies": {
    "babel-core": "^5.8.3",
    "babel-loader": "^5.3.2",
    "webpack": "^1.10.3",
    "webpack-dev-server": "^1.10.1"
  },
  "dependencies": {
    "react": "^0.13.3"
  }
}

npm run dev 可執行 scripts 中的 dev 指令。
npm run build 可執行 scripts 中的 build 指令

webacpk 還提供許許多多開發時需要的 loader 及 plugin，詳細請參閱官網文件。連結

其他：
react-starter-kit
es6features
es7features
建立react webpack 工具包
 使用 Webpack 建立 React 專案開發環境