{this.props.title}
Quantity: {this.state.qty}
Price per item: ${this.props.price}
資訊專欄INFORMATION COLUMN
摘要：在上面的列表中，是自解釋型的。我們將使用后者。調整文件的內容到這一步，這個應用就具備熱刷新的功能。下一步，更新文件中的到現在為止，如果你在控制臺運行壓縮文件將被創建并且放在路徑下面。
這是React和ECMAScript2015系列文章的最后一篇，我們將繼續探索React 和 Webpack的使用。
下面是所有系列文章章節的鏈接：
React 、 ES6 - 介紹（第一部分）
React類、ES7屬性初始化（第二部分）
React類，方法綁定（第三部分）
ES6中React Mixins的使用（第四部分）
React 和ES6 之JSPM的使用（第五部分）
React 和 ES6 工作流之 Webpack的使用（第六部分）
本篇文章Github源碼
| React | JS |
|---|---|
就像JSPM一樣，Webpack是你的前端應用的模塊管理的解決方案。
使用Webpack,你能夠用一種方便的方法完全控制你的應用資源。
為什么Webpack這么受歡迎？主要有以下幾個原因：
Webpack使用npm作為外部模塊源。如果你想添加React到你的項目中，只需要執行 npm install react即可。這是一個附加的優勢，因為你已經知道如何將你喜歡的庫添加到你的項目中。
你幾乎可以加載所有的東西，而不只是JavaScript。Webpack使用名字為loaders的裝載機來完成加載。這是對應的loaders清單
Webpack有一個很強大的開發工具生態系統。像熱更新這樣的東西將戲劇性的改變你的開發流程。
對于各種類型的任務有很多Webpack plugins。在大多數情況下，你可以使用已經存在的解決方案。
Webpack 有很漂亮的logo :)
Getting started讓我們開始從之前的系列文章中調整我們的應用程序。
首先，我們將要安裝初始的開發依賴。
npm install --save-dev webpack npm install --save-dev babel-core npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-0
在上面的列表中，webpack是自解釋型的。Babel是用于將ES6轉換成ES5(如果你閱讀了前面的React and ES6系列文章，你應該對ES6和ES5非常熟悉)。自從babel 6后你必須為每一個額外的語言特征安裝獨立的包。這些包叫做presets。我們安裝es2015 preset,react preset和stage-0 preset。對于更多關于babel 6的信息，你可以閱讀這篇文章。
下一步，安裝非開發依賴(react和react-dom包)：
npm install --save react react-dom
現在在你的項目中基于Webpack最重要的一步。在你的項目根目錄下面創建webpack.config.dev.js文件。這個文件將用來打包你所有的在一個bundle(或者多個bundle)里面的JavaScript(在大多數項目中不只是JavaScript)，打包完就可以在用戶的瀏覽器中正式運行。
webpack.config.dev.js的內容如下：
var path = require("path");
var webpack = require("webpack");
var config = {
devtool: "cheap-module-eval-source-map",
entry: [
"./app.js"
],
output: {
path: path.join(__dirname, "dist"),
filename: "bundle.js",
publicPath: "/dist/"
},
plugins: [
new webpack.NoEmitOnErrorsPlugin()
]
};
module.exports = config;
以上代碼的亮點：
Line 5. 在提高應用程序的各種調試策略中，我們有一個選擇，你可以點擊這里了解更多關于cheap-module-eval-source-map的內容。
Lines 6-8. 這里我們定義了app.js為應用程序的主入口。
Lines 9-13. 這個配置制定Webpack將打包所有的模塊成文件bundle.js,并且將bundle.js文件放到dist/路徑下面。
Webpack loaders用Webpack幾乎可以加載所有的東西到你的代碼中(這里是清單)。Webpack使用的名字叫做Webpack裝載機。
你可以制定文件擴展名關聯到特別的裝載機。
在我們的案例中，我們將使用babel-loader來將ES2015 / ES6的代碼轉換成ES5.首先，我們需要安裝npm依賴包。
npm install --save-dev babel-loader
然后，通過添加一些新的裝載機關鍵字到出口對象中來調整webpack.config.dev.js文件的配置。
var config = {
... add the below code as object key ...
module: {
loaders: [
{
test: /.js$/,
loaders: ["babel-loader"],
exclude: /node_modules/
}
]
}
};
module.exports = config;
這里需要重點注意的是，我們通過exclude關鍵字的設置禁止Webpack解析node_modules文件夾里面的文件。
接下來我們在項目的根目錄下面添加.babelrc文件。
{
"presets": ["react", "es2015", "stage-0"]
}
這個文件是配置babel以便能夠使用前面我們添加的react,es2015和stage-0presets。
現在，無論什么時候Webpack遇到，比如：import CartItem from "./cartItem.js",它將加載這個文件并且將ES6轉換成ES5。
添加Webpack開發服務器為了運行這個程序，我們需要在服務器上運行這些文件。
幸運的是，Webpack生態系統已經提供所有你需要的東西。你可以使用Webpack開發服務器或者Webpack開發中間件，比如：Express.js。
我們將使用后者。優勢是在內存中處理文件時速度快。
讓我們安裝npm模塊:
npm install --save-dev webpack-dev-middleware express
下一步，在根目錄下面添加server.js文件：
var path = require("path");
var express = require("express");
var webpack = require("webpack");
var config = require("./webpack.config.dev");
var app = express();
var compiler = webpack(config);
var port = 3000;
app.use(require("webpack-dev-middleware")(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
app.use(require("webpack-hot-middleware")(compiler));
app.get("*", function (req, res) {
res.sendFile(path.join(__dirname, "index.html"));
});
app.listen(port, function onAppListening(err) {
if (err) {
console.error(err);
} else {
console.info("==> Webpack development server listening on port");
}
});
這是典型的使用Webpack Dev Middleware的express.js服務器。
添加熱刷新模塊Webpack Dev Middleware已經包含了熱刷新的特性。無論什么時候，你的代碼發生變化，它都會立即刷新頁面。
如果想簡單的看看熱刷新的演示效果，可以看看Dan Abramov的視頻。
為了激活Hot Module Reloading,你首先得安裝必須得npm包。
npm install --save-dev webpack-hot-middleware
然后在webpack.config.dev.js文件中設置entry和plugins:
var config = {
entry: [
"./app.js",
"webpack-hot-middleware/client"
],
...
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
};
module.exports = config;
如果想對React 應用更進一步使用模塊刷新其實有很多種方法。
其中一個簡單的方法就是安裝babel-preset-react-hmre模塊。
npm install --save-dev babel-preset-react-hmre
調整.babelrc文件的內容：
{
"presets": ["react", "es2015", "stage-0"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
到這一步，這個應用就具備熱刷新的功能。
最后幾步創建index.html文件
React and ES6 Part 6
創建app.js文件
import React from "react";
import ReactDOM from "react-dom";
import CartItem from "./cartItem.js";
const order = {
title: "Fresh fruits package",
image: "http://images.all-free-download.com/images/graphiclarge/citrus_fruit_184416.jpg",
initialQty: 3,
price: 8
};
ReactDOM.render(
< CartItem
title={order.title}
image={order.image}
initialQty={order.initialQty}
price={order.price
}
/>,
document.querySelector(".root")
)
;
創建cartItem.js文件
import React from "react";
export default class CartItem extends React.Component {
static propTypes = {
title: React.PropTypes.string.isRequired,
price: React.PropTypes.number.isRequired,
initialQty: React.PropTypes.number
};
static defaultProps = {
title: "Undefined Product",
price: 100,
initialQty: 0
};
state = {
qty: this.props.initialQty,
total: 0
};
constructor(props) {
super(props);
}
componentWillMount() {
this.recalculateTotal();
}
increaseQty() {
this.setState({qty: this.state.qty + 1}, this.recalculateTotal);
}
decreaseQty() {
let newQty = this.state.qty > 0 ? this.state.qty - 1 : 0;
this.setState({qty: newQty}, this.recalculateTotal);
}
recalculateTotal() {
this.setState({total: this.state.qty * this.props.price});
}
render() {
return (
{this.props.title}
Quantity: {this.state.qty}
Price per item: ${this.props.price}
Total: ${this.state.total}
);
}
}
修改package.json
現在已經將前面所有碎片化的代碼已經整合在一個項目中。
我們需要在package.json文件的scripts區域添加一些腳本。
{
"name": "awesome-application",
"version": "1.0.0",
...
"scripts": {
"start": "node server.js"
},
...
}
運行項目
運行npm start
在瀏覽器中打開http://localhost:3000
項目運行效果圖
現在我們能夠在服務器上運行我們的應用程序并且能夠通過熱模塊更新刷新我們的頁面。
但是如果我們想要將產品部署到生產環境？沒問題，Webpack有對應的解決方案。
創建webpack.config.prod.js文件，文件內容為:
var path = require("path");
var webpack = require("webpack");
var config = {
devtool: "source-map",
entry: [
"./app.js"
],
output: {
path: path.join(__dirname, "dist"),
filename: "bundle.js"
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.DefinePlugin({
"process.env": {
"NODE_ENV": JSON.stringify("production")
}
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
],
module: {
loaders: [
{
test: /.js$/,
loaders: ["babel-loader"],
exclude: /node_modules/
}
]
}
};
module.exports = config;
它和開發模式下的配置文件有點相似，但是有以下不同點：
熱刷新的功能不再有，因為在生產環境中不需要這個功能。
JavaScript bundle被依賴于webpack.optimize.UglifyJsPlugin的UglifyJs壓縮。
環境變量NODE_ENV被設置成production。這需要屏蔽來自React開發環境中的警告。
下一步，更新package.json文件中的scripts：
{
...
"scripts": {
"start": "node server.js",
"clean": "rimraf dist",
"build:webpack": "NODE_ENV=production webpack --progress --colors --config webpack.config.prod.js",
"build": "npm run clean && npm run build:webpack"
},
...
}
到現在為止，如果你在控制臺運行npm run build,壓縮文件bundle.js將被創建并且放在dist/路徑下面。這個文件準備在生產環境中使用。
這只是剛剛開始我們剛才學到的東西只是Webpack的一些基礎。
Webpack是一個很容易入門的工具，但是要想精通，需要點時間好好研究研究。
參考文檔Official Webpack website
List of Webpack loaders
Babel 6 presets
Upgrading to Babel 6. Babel 6 for Babelify and WebPack
Technical details of Webpack Hot Module Replacement
Video with process of Hot Module Reloading
About Webpack Dev Server
About Webpack Dev Middleware
About multiple entry points in Webpack
About stylesheets in Webpack
社群品牌：從零到壹全棧部落
定位：尋找共好，共同學習，持續輸出全棧技術社群
業界榮譽：IT界的邏輯思維
文化：輸出是最好的學習方式
官方公眾號：全棧部落
社群發起人：春哥(從零到壹創始人，交流微信：liyc1215)
技術交流社區：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書學習筆記
| 關注全棧部落官方公眾號，每晚十點接收系列原創技術推送 |
|---|
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83979.html
摘要：在上面的列表中，是自解釋型的。我們將使用后者。調整文件的內容到這一步，這個應用就具備熱刷新的功能。下一步，更新文件中的到現在為止，如果你在控制臺運行壓縮文件將被創建并且放在路徑下面。 這是React和ECMAScript2015系列文章的最后一篇，我們將繼續探索React 和 Webpack的使用。 下面是所有系列文章章節的鏈接： React 、 ES6 - 介紹（第一部分） Rea...
摘要：前端日報精選從設計到源碼用強類型語言增強通過一個場景實例了解前端處理大數據的無限可能專題之從零實現的表單驗證第一部分使用和技巧對表單進行約束驗證中文譯即將到來的正則表達式新特性掘金個快速編程技巧個人文章周刊第期相信控制像一樣使用 2017-07-15 前端日報 精選 Redux從設計到源碼用強類型語言GraphQL增強React通過一個場景實例 了解前端處理大數據的無限可能JavaSc...
摘要：使用箭頭函數和構造函數當方法被調用時，會保留上下文。我們能使用這個特征用下面的方法在構造函數中重定義函數。在調用方法的方使用函數綁定語法你也可以直接在非構造函數里面的里面直接使用函數綁定。 這是React和ECMAScript6／ECMAScript7結合使用系列文章的第三篇。 下面是所有系列文章章節的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始...
摘要：在的組建創建中，不太可能使用混合機制。在中，這個組建將被命名為。他們中的其中一個如下結論高階組建功能強大和極具表現力。現在高階組建廣泛的被使用來替代老式的句法。 這是React和ECMAScript6／ECMAScript7結合使用系列文章的第四篇。 下面是所有系列文章章節的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始化（第二部分） React類...
閱讀 841·2021-11-15 17:58
閱讀 3641·2021-11-12 10:36
閱讀 3779·2021-09-22 16:06
閱讀 956·2021-09-10 10:50
閱讀 1325·2019-08-30 11:19
閱讀 3309·2019-08-29 16:26
閱讀 928·2019-08-29 10:55
閱讀 3341·2019-08-26 13:48
