React-引领未来的用户界面开发框架-读书笔记（七）

最新推荐文章于 2022-01-18 18:35:36 发布

JackieZhengChina

最新推荐文章于 2022-01-18 18:35:36 发布

阅读量408

点赞数

分类专栏： React 文章标签： React

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

第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