《React+Redux前端开发实战》—1.1.2 模块打包工具之Browserify

1.1.2  模块打包工具之Browserify

　　使用React进行开发，势必会包含对各种语法的解析。这需要将所有模块打包成一个或多个文件，以方便在浏览器中执行使用。拥有一个好的代码构建工具，无疑能提升开发者的开发效率。

　　由于近几年前端开发对于模块化思想的追崇，出现了如Require.js和sea.js等优秀的模块化开发工具。模块化实现了项目的高内聚低耦合，降低了模块与模块之间的依赖关系。特别是对于大型复杂的单页应用来说，模块化更能提升应用的性能。

　　此外，还有一些浏览器不支持的功能（如ES 6中提出的export和import），需要借助一些工具实现。

　　基于以上种种原因，就引出了接下来要介绍的两款较为流行的模块打包工具Browserify和Webpack。本节先介绍Browserify。

　　Browserify是一个浏览器端代码模块化的JavaScript打包工具，其图标如图1.1所示。可以使用类似于Node的require()方法加载NPM模块，在HTML文件中使用script标签引用Browserify编译后的代码。

　　使用NPM全局安装Browserify：

　　npm install -g browserify

　　命令行参数及说明如下：

•  –outfile，-o：将Browserify日志打印到文件；

•  –require，-r：绑定模块名或文件，用逗号分隔；

•  –entry，-e：应用程序的入口；

•  –ignore，-i：省略输出；

•  –external，-x：从其他绑定引入文件；

•  –transform，-t：对上层文件进行转换；

•  –command，-c：对上层文件使用转换命令；

• –standalone -s：生成一个UMD（Universal Module Definition）类型的接口，提供给其他模块使用；

  
  

  
  

  图1.1  Browserify

•  –debug -d：激活source maps调试文件；

•  –help，-h：显示帮助信息；

•  –insert-globals，–ig，–fast：跳过检查，定义全局变量；

•  –detect-globals，–dg：检查全局变量是否存在；

•  –ignore-missing，–im：忽略require()方法；

•  –noparse=FILE：不解析文件，直接build；

•  –deps：打印完整输出日志；

•  –list：打印每个文件的依赖关系；

•  –extension=EXTENSION：指定扩展名的文件作为模块加载，允许多次设置。

　　使用Browserify时必须在终端，例如：

　　borwserify index.js > bundle.js

　　上述代码将index.js编译为bundle.js，生成的文件在浏览器端能直接运行。

　　总结一下使用Browserify的步骤：写Node程序或代码模块→用Browserify预编译成bundle.js→在HTML中引用bundle.js。