设计网站页面要注意什么,公司响应式网站建设报价,怎么建立公司官网,赤风设计网站第14章 开发工具 React使用了若干的抽象层来帮助你更轻松地开发组件、推导程序状态。然而#xff0c;在调试、构建及分发应用时#xff0c;这样设计就会产生负面影响了。 幸运的是#xff0c;我们拥有一些非常好的开发工具能在开发及构建过程中为我们提供帮助。在这里探讨这… 第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_ENVproduction 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的ReactJSX文件。
var React require(react);
React.reder(h1Hello World/h1, document.body); 再增加一个简单的index.html文件。
htmlheadtitle ReactBrowserify Demo/title/headbodyThis text shluld not appear in the browserscript srcbundle.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对象中。
watchwatchify --debug index.js -o bundle.js 这样就不再需要运行npm run build 运行npmrun watch即可它会给你带来更流畅的开发体验。 构建 现在需要简单运行一下构建命令就能将ReactJSX代码打包到一个文件中共浏览器使用了
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 classNameLogo 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?size8192}]}
};现在你需要安装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
