资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/React 和 ES6 工作流之 Webpack的使用（第六部分）

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

Mr_houzi / 2451人阅读

摘要：在上面的列表中，是自解释型的。我们将使用后者。调整文件的内容到这一步，这个应用就具备热刷新的功能。下一步，更新文件中的到现在为止，如果你在控制台运行压缩文件将被创建并且放在路径下面。

这是React和ECMAScript2015系列文章的最后一篇，我们将继续探索React 和 Webpack的使用。

下面是所有系列文章章节的链接：

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

React类、ES7属性初始化（第二部分）

React类，方法绑定（第三部分）

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

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

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

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

就像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有对应的解决方案。

创建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
全栈部落完整系列教程：全栈部落完整电子书学习笔记
关注全栈部落官方公众号，每晚十点接收系列原创技术推送
云服务器 GPU云服务器 webpack使用 java 工作日之差 webpack 使用公用cdn react使用webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83979.html

相关文章

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

    摘要：在上面的列表中，是自解释型的。我们将使用后者。调整文件的内容到这一步，这个应用就具备热刷新的功能。下一步，更新文件中的到现在为止，如果你在控制台运行压缩文件将被创建并且放在路径下面。 这是React和ECMAScript2015系列文章的最后一篇，我们将继续探索React 和 Webpack的使用。 下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） Rea...

    yunhao 评论0 收藏0

  • 2017-07-15 前端日报

    摘要：前端日报精选从设计到源码用强类型语言增强通过一个场景实例了解前端处理大数据的无限可能专题之从零实现的表单验证第一部分使用和技巧对表单进行约束验证中文译即将到来的正则表达式新特性掘金个快速编程技巧个人文章周刊第期相信控制像一样使用 2017-07-15 前端日报 精选 Redux从设计到源码用强类型语言GraphQL增强React通过一个场景实例 了解前端处理大数据的无限可能JavaSc...

    Vicky 评论0 收藏0

  • React类，方法绑定（第三部分）

    摘要：使用箭头函数和构造函数当方法被调用时，会保留上下文。我们能使用这个特征用下面的方法在构造函数中重定义函数。在调用方法的方使用函数绑定语法你也可以直接在非构造函数里面的里面直接使用函数绑定。 这是React和ECMAScript6／ECMAScript7结合使用系列文章的第三篇。 下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始...

    livem 评论0 收藏0

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

    摘要：在的组建创建中，不太可能使用混合机制。在中，这个组建将被命名为。他们中的其中一个如下结论高阶组建功能强大和极具表现力。现在高阶组建广泛的被使用来替代老式的句法。 这是React和ECMAScript6／ECMAScript7结合使用系列文章的第四篇。 下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始化（第二部分） React类...

    Karrdy 评论0 收藏0

发表评论

登陆后可评论

0条评论

Mr_houzi

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<