React-引领未来的用户界面开发框架-读书笔记（七）
第14章 開發工具
React使用了若干的抽象層來幫助你更輕松地開發組件、推導程序狀態。然而，在調試、構建及分發應用時，這樣設計就會產生負面影響了。
幸運的是，我們擁有一些非常好的開發工具能在開發及構建過程中為我們提供幫助。在這里探討這些構建工具和調試工具，它們可以讓開發React程序更加高效。
Browserify
Browserify是一個JavaScript打包工具，支持瀏覽器中使用Node.js風格的require()方法。不需要了解太多的細節也不必不知所措，Browerify會自動將所有依賴打包到一個文件中，以支持模塊在瀏覽器環境中使用。任何包含require語句的JavaScript文件運行Browerify都會自動打包所有的依賴項。
盡管十分強大，Browserify僅支持JavaScript文件，不像Bower、Webpack或者其他打包工具支持多種文件格式。
建立一個Browerify項目
想要讓Broserify良好地運行起來，你必須初始化一個node項目，假設已經安裝好了node和npm，你可以通過在終端運行下面命令來初始化一個新項目。這個命令會創建一個含有必要資源的package.json文件。
npm init # ... answer questions as necessary to complete init npm install --save-dev browserify reactify react uglify-js在package.json文件的末尾增加如下構建腳本：
... "devDependencies": {"browserify": "^5.11.2","reactify": "^0.14.0","react": "^0.11.1","uglify-js": "^2.4.15", }, "scripts": {"build": "browserify --debug index.js > bundle.js","build-dist": "NODE_ENV=production browserify index.js | uglifyjs -m > bundle.min.js" }, "browserify": {"transform": ["reactify"] }通過運行npm run build來執行默認的任務，這個命令會創建一個打包好的JavaScript文件和對應的源代碼映射文件（source map）。這樣的配置能夠讓你像引用多個獨立文件那樣查看錯誤信息和添加斷點，而實際上你只引用了一個文件。同時，你也會看到原來的JSX代碼而不是被編譯成原生JavaScript的版本。
對于構建生產環境的代碼，我們需要指明當前是生產環境。React使用了一個叫做enify的轉換工具，當它和代碼壓縮工具如uglify一起使用時，可以移除所有調試代碼和詳細的錯誤信息。以此來提升效率并縮減文件體積。
如果你想要使用一些ES6的特性，如箭頭函數或類，你可以把transform那一行改成這樣：
"transform"：[["reactify",{"harmony":true}]現在你就可以寫成React組件并將其打包了。
對代碼做出修改
讓我們創建一個名為index.js的React+JSX文件。
var React = require('react'); React.reder(<h1>Hello World</h1>, document.body);再增加一個簡單的index.html文件。
<html><head><title> React+Browserify Demo</title></head><body>This text shluld not appear in the browser<script src="bundle.js"></script></body> </html>現在項目結構看起來大致是這樣的：
index.html index.js node_modules/ package.json如果現在嘗試打開index.html你會發現頁面沒有任何加載JavaScript，因為我們還沒有打包出最終的文件。運行npm run build 命令然后再刷新該頁面，這個示例程序就能成功加載了。
Watchify
你可以選擇增加一個監控任務，它對開發工作大有幫助。Watchify是對Browserify的一個封裝，當你改動了文件的時候，他會自動幫你重新打包。同時Watchify還是用了還緩存來加快重新打包的速度。
npm install --save-dev watchify把下面這行添加到package.json中的scripts對象中。
"watch"："watchify --debug index.js -o bundle.js"這樣就不再需要運行npm run build ，運行npmrun watch即可，它會給你帶來更流暢的開發體驗。
構建
現在需要簡單運行一下構建命令就能將React+JSX代碼打包到一個文件中共瀏覽器使用了：
npm run-script build你會看到多了一個新的bundle.js，打開bundle.js你會發現文件頭部有一些被壓縮過的JavaScirpt代碼，后續跟著的是經過JSX轉換的組件代碼。這個文件包含了你在index.js中需要的所有的依賴，它可以在瀏覽器中運行，再打開index.html你會發現一切都正常工作了。
Webpack
Webpack和Browserify很像，也會把你的JavaScript代碼打包到一個文件中。此外Webpack還能：
- 將CSS、圖片以及其他資源打包到同一個包中。
- 在打包前對文件進行預處理（less、coffee、jsx等）。
- 根據入口文件的不同把你的包拆分成多個包。
- 支持開發環境的特性標志位。
- 支持模塊代碼“熱”替換。
- 支持異步加載
因此Webpack能夠實現Browserify混合其他構建工具如gulp、grunt的功能。
Webpack是一個模塊功能系統，通過增加或者替換插件來實現功能，默認情況下，它啟用了一個CommonJS解釋器插件。
在這里我們不會詳細介紹Webpack的每一種特性，不過我們會介紹基本的功能以及讓它與React一起工作需要做的配置。
Webpack與React
React幫助你開發應用程序組件。Webpack不僅幫助你打包所有的JavaScript文件，還擁有其他所有應用需要的資源。這樣的設計讓你能創建一個自動包含所有類型依賴的組件。由于可以自動包含所有依賴，組件也變得更加方便移植。更妙的是，隨著應用不斷地開發并修改，當你移除某個組件的時候，它的所有依賴也會自動被移除。這意味著不會再有未被使用的CSS或圖片遺留在代碼目錄中。
讓我們看一下React組件使怎樣加載資源依賴的。
// logo.js require('./logo.css');var React = require('react');var Logo = React.createClass({render: function () {return <img className="Logo" src={require('./logo.png')} />} })module.exports = Logo;我們需要一個應用的入口文件來打包這個組件。
// app.js var React = require('react'); var Logo = require('./logo.js');React.render(<Logo/>, document.body);現在我們需要創建一個Webpack配置文件，以通知Webpack對不同的文件類型應該使用哪種加載器。同時，還要定義應用的入口文件以及打包后文件的存放位置。
// webpack.config.js module.exports = {// 程序的入口文件entry: './app.js',output: {// 所有打包好的資源的存放位置path: './public/build',// 使用url-loader的資源前綴publicPath: './build/',// 生成的打包文件名filename: 'bundle.js',},module: {loaders: [{// 用于匹配加載器支持的文件格式的正則表達式test : /\.(js)$/,// 要使用的加載器類型// 加載器支持通過查詢字符串的方式接收參數loader: 'jsx-loader?harmony'},{test: /\.(css)$/,// 多個加載器通過“!”鏈接loader: 'style-loader!css-loader'},{test : /\.(png|jpg)$/,// url-loader 支持 base64 編碼的行內資源loader: 'url-loader?size=8192'}]} };現在，你需要安裝Webpack及一系列加載器。你可以選擇在控制臺使用npm或修改package.json來完成安裝。
確保你把這些加載器安裝到了本地，而不是全局（使用-g參數）。
npm install webpack react npm install url-loader jsx-loader style-loader css-loader當所有的準備工作完成后，運行Webpack：
// 在開發環境構建一次 webpack// 構建并生成源代碼映射文件 webpack -d// 在生產環境構建，壓縮、混淆代碼，并移除無用代碼 webpack -p// 加速增量構建，可以和其他選項一起使用 webpack --watch調試工具
安裝React DeveloperTool擴展
第15章 測試
page125~180
總結
以上是生活随笔為你收集整理的React-引领未来的用户界面开发框架-读书笔记（七）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： React-引领未来的用户界面开发框架-
- 下一篇： React-引领未来的用户界面开发框架-