国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React 和 ES6 工作流之 Webpack的使用（第六部分）

Mr_houzi / 2487人閱讀

摘要：在上面的列表中，是自解釋型的。我們將使用后者。調(diào)整文件的內(nèi)容到這一步，這個應(yīng)用就具備熱刷新的功能。下一步，更新文件中的到現(xiàn)在為止，如果你在控制臺運(yùn)行壓縮文件將被創(chuàng)建并且放在路徑下面。

這是React和ECMAScript2015系列文章的最后一篇，我們將繼續(xù)探索React 和 Webpack的使用。

下面是所有系列文章章節(jié)的鏈接：

React 、 ES6 - 介紹（第一部分）

React類、ES7屬性初始化（第二部分）

React類，方法綁定（第三部分）

ES6中React Mixins的使用（第四部分）

React 和ES6 之JSPM的使用（第五部分）

React 和 ES6 工作流之 Webpack的使用（第六部分）

本篇文章Github源碼
React JS
什么是Webpack?

就像JSPM一樣，Webpack是你的前端應(yīng)用的模塊管理的解決方案。

使用Webpack,你能夠用一種方便的方法完全控制你的應(yīng)用資源。

為什么Webpack這么受歡迎？主要有以下幾個原因：

Webpack使用npm作為外部模塊源。如果你想添加React到你的項目中，只需要執(zhí)行 npm install react即可。這是一個附加的優(yōu)勢，因為你已經(jīng)知道如何將你喜歡的庫添加到你的項目中。

你幾乎可以加載所有的東西，而不只是JavaScript。Webpack使用名字為loaders的裝載機(jī)來完成加載。這是對應(yīng)的loaders清單

Webpack有一個很強(qiáng)大的開發(fā)工具生態(tài)系統(tǒng)。像熱更新這樣的東西將戲劇性的改變你的開發(fā)流程。

對于各種類型的任務(wù)有很多Webpack plugins。在大多數(shù)情況下，你可以使用已經(jīng)存在的解決方案。

Webpack 有很漂亮的logo :)

Getting started

讓我們開始從之前的系列文章中調(diào)整我們的應(yīng)用程序。

首先，我們將要安裝初始的開發(fā)依賴。

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轉(zhuǎn)換成ES5(如果你閱讀了前面的React and ES6系列文章，你應(yīng)該對ES6和ES5非常熟悉)。自從babel 6后你必須為每一個額外的語言特征安裝獨(dú)立的包。這些包叫做presets。我們安裝es2015 preset,react preset和stage-0 preset。對于更多關(guān)于babel 6的信息，你可以閱讀這篇文章。

下一步，安裝非開發(fā)依賴(react和react-dom包)：

npm install --save react react-dom

現(xiàn)在在你的項目中基于Webpack最重要的一步。在你的項目根目錄下面創(chuàng)建webpack.config.dev.js文件。這個文件將用來打包你所有的在一個bundle(或者多個bundle)里面的JavaScript(在大多數(shù)項目中不只是JavaScript)，打包完就可以在用戶的瀏覽器中正式運(yùn)行。

webpack.config.dev.js的內(nèi)容如下：

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;

以上代碼的亮點(diǎn)：

Line 5. 在提高應(yīng)用程序的各種調(diào)試策略中，我們有一個選擇，你可以點(diǎn)擊這里了解更多關(guān)于cheap-module-eval-source-map的內(nèi)容。

Lines 6-8. 這里我們定義了app.js為應(yīng)用程序的主入口。

Lines 9-13. 這個配置制定Webpack將打包所有的模塊成文件bundle.js,并且將bundle.js文件放到dist/路徑下面。

Webpack loaders

用Webpack幾乎可以加載所有的東西到你的代碼中(這里是清單)。Webpack使用的名字叫做Webpack裝載機(jī)。

你可以制定文件擴(kuò)展名關(guān)聯(lián)到特別的裝載機(jī)。

在我們的案例中，我們將使用babel-loader來將ES2015 / ES6的代碼轉(zhuǎn)換成ES5.首先，我們需要安裝npm依賴包。

npm install --save-dev babel-loader

然后，通過添加一些新的裝載機(jī)關(guān)鍵字到出口對象中來調(diào)整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;

這里需要重點(diǎn)注意的是，我們通過exclude關(guān)鍵字的設(shè)置禁止Webpack解析node_modules文件夾里面的文件。

接下來我們在項目的根目錄下面添加.babelrc文件。

{
  "presets": ["react", "es2015", "stage-0"]
}

這個文件是配置babel以便能夠使用前面我們添加的react,es2015和stage-0presets。

現(xiàn)在，無論什么時候Webpack遇到，比如：import CartItem from "./cartItem.js",它將加載這個文件并且將ES6轉(zhuǎn)換成ES5。

添加Webpack開發(fā)服務(wù)器

為了運(yùn)行這個程序，我們需要在服務(wù)器上運(yùn)行這些文件。

幸運(yùn)的是，Webpack生態(tài)系統(tǒng)已經(jīng)提供所有你需要的東西。你可以使用Webpack開發(fā)服務(wù)器或者Webpack開發(fā)中間件，比如：Express.js。

我們將使用后者。優(yōu)勢是在內(nèi)存中處理文件時速度快。

讓我們安裝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服務(wù)器。

添加熱刷新模塊

Webpack Dev Middleware已經(jīng)包含了熱刷新的特性。無論什么時候，你的代碼發(fā)生變化，它都會立即刷新頁面。

如果想簡單的看看熱刷新的演示效果，可以看看Dan Abramov的視頻。

為了激活Hot Module Reloading,你首先得安裝必須得npm包。

npm install --save-dev webpack-hot-middleware

然后在webpack.config.dev.js文件中設(shè)置entry和plugins:

var config = {
    entry: [
        "./app.js",
        "webpack-hot-middleware/client"
    ],

    ...

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
};

module.exports = config;

如果想對React 應(yīng)用更進(jìn)一步使用模塊刷新其實(shí)有很多種方法。

其中一個簡單的方法就是安裝babel-preset-react-hmre模塊。

npm install --save-dev babel-preset-react-hmre

調(diào)整.babelrc文件的內(nèi)容：

{
  "presets": ["react", "es2015", "stage-0"],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

到這一步，這個應(yīng)用就具備熱刷新的功能。

最后幾步

創(chuàng)建index.html文件




    
    React and ES6 Part 6

創(chuàng)建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")
)
;

創(chuàng)建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

現(xiàn)在已經(jīng)將前面所有碎片化的代碼已經(jīng)整合在一個項目中。

我們需要在package.json文件的scripts區(qū)域添加一些腳本。

{
  "name": "awesome-application",
  "version": "1.0.0",
  ...
  "scripts": {
    "start": "node server.js"
  },
  ...
}
運(yùn)行項目

運(yùn)行npm start

在瀏覽器中打開http://localhost:3000

項目運(yùn)行效果圖

Webpack生產(chǎn)環(huán)境配置

現(xiàn)在我們能夠在服務(wù)器上運(yùn)行我們的應(yīng)用程序并且能夠通過熱模塊更新刷新我們的頁面。

但是如果我們想要將產(chǎn)品部署到生產(chǎn)環(huán)境？沒問題，Webpack有對應(yīng)的解決方案。

創(chuàng)建webpack.config.prod.js文件，文件內(nèi)容為:

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;

它和開發(fā)模式下的配置文件有點(diǎn)相似，但是有以下不同點(diǎn)：

熱刷新的功能不再有，因為在生產(chǎn)環(huán)境中不需要這個功能。

JavaScript bundle被依賴于webpack.optimize.UglifyJsPlugin的UglifyJs壓縮。

環(huán)境變量NODE_ENV被設(shè)置成production。這需要屏蔽來自React開發(fā)環(huán)境中的警告。

下一步，更新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"
  },
  ...
}

到現(xiàn)在為止，如果你在控制臺運(yùn)行npm run build,壓縮文件bundle.js將被創(chuàng)建并且放在dist/路徑下面。這個文件準(zhǔn)備在生產(chǎn)環(huán)境中使用。

這只是剛剛開始

我們剛才學(xué)到的東西只是Webpack的一些基礎(chǔ)。

Webpack是一個很容易入門的工具，但是要想精通，需要點(diǎn)時間好好研究研究。

參考文檔

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

社群品牌：從零到壹全棧部落
定位：尋找共好，共同學(xué)習(xí)，持續(xù)輸出全棧技術(shù)社群
業(yè)界榮譽(yù)：IT界的邏輯思維
文化：輸出是最好的學(xué)習(xí)方式
官方公眾號：全棧部落
社群發(fā)起人：春哥(從零到壹創(chuàng)始人，交流微信：liyc1215)
技術(shù)交流社區(qū)：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書學(xué)習(xí)筆記
關(guān)注全棧部落官方公眾號，每晚十點(diǎn)接收系列原創(chuàng)技術(shù)推送

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83979.html

相關(guān)文章

  • React 和 ES6 工作流之 Webpack的使用（第六部分）

    摘要：在上面的列表中，是自解釋型的。我們將使用后者。調(diào)整文件的內(nèi)容到這一步，這個應(yīng)用就具備熱刷新的功能。下一步，更新文件中的到現(xiàn)在為止，如果你在控制臺運(yùn)行壓縮文件將被創(chuàng)建并且放在路徑下面。 這是React和ECMAScript2015系列文章的最后一篇，我們將繼續(xù)探索React 和 Webpack的使用。 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） Rea...

    yunhao 評論0 收藏0

  • 2017-07-15 前端日報

    摘要：前端日報精選從設(shè)計到源碼用強(qiáng)類型語言增強(qiáng)通過一個場景實(shí)例了解前端處理大數(shù)據(jù)的無限可能專題之從零實(shí)現(xiàn)的表單驗證第一部分使用和技巧對表單進(jìn)行約束驗證中文譯即將到來的正則表達(dá)式新特性掘金個快速編程技巧個人文章周刊第期相信控制像一樣使用 2017-07-15 前端日報 精選 Redux從設(shè)計到源碼用強(qiáng)類型語言GraphQL增強(qiáng)React通過一個場景實(shí)例 了解前端處理大數(shù)據(jù)的無限可能JavaSc...

    Vicky 評論0 收藏0

  • React類，方法綁定（第三部分）

    摘要：使用箭頭函數(shù)和構(gòu)造函數(shù)當(dāng)方法被調(diào)用時，會保留上下文。我們能使用這個特征用下面的方法在構(gòu)造函數(shù)中重定義函數(shù)。在調(diào)用方法的方使用函數(shù)綁定語法你也可以直接在非構(gòu)造函數(shù)里面的里面直接使用函數(shù)綁定。 這是React和ECMAScript6／ECMAScript7結(jié)合使用系列文章的第三篇。 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始...

    livem 評論0 收藏0

  • ES6中React Mixins的使用（第四部分）

    摘要：在的組建創(chuàng)建中，不太可能使用混合機(jī)制。在中，這個組建將被命名為。他們中的其中一個如下結(jié)論高階組建功能強(qiáng)大和極具表現(xiàn)力。現(xiàn)在高階組建廣泛的被使用來替代老式的句法。 這是React和ECMAScript6／ECMAScript7結(jié)合使用系列文章的第四篇。 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） React類、ES7屬性初始化（第二部分） React類...

    Karrdy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<