Javascript前端构建工具

　　Javascript是建立前端用户界面的强大工具，有一些成熟工具适合开发环境，这里介绍一些代码构建的工具。首先我们提出目标需求，然后提出问题解决方式。

目标：

• 代码在多个文件中，部署时希望作为统一一个Js文件。
• 希望有一个机器能够处理机械化的样式如 IIFEs, strict mode
• 自动测试，无论我什么时候改变代码都能运行。
• 静态分析我的代码以发现问题
• 本地web服务器用户运行我的应用，能在改变文件时自动加载页面
• 使用ES6或其他能够向下编译到旧版本js系统

 

解决方案：

npm 用于依赖

使用 npm 作为任务运行器解决依赖问题，每个发布到 bower 的项目也会发布到 npm,  npm scripts是能够有效定义任务，无需安装全局的其他东西或者编辑$PATH. 任何node-based CLI 工具将被自动安装到本地的node_modules目录，帮助节约了设置时间. 不再需要git clone && npm install && npm start.

通常有以下定制任务:

• npm start – 启动一个本地webserver ，然后监察文件系统，一旦变化运行测试刷新浏览器
• npm run build – 创建最后发布包
• npm run ci – 运行测试和持续集成的静态分析

 

exorcist + browserify + 编译插件

 browserify 是编译器 转换器 最小化器和打包器。将编译阶段所有工作都放在一起了。

大部分特性是使用 nodejs modules 概念在许多文件中编写代码，在每个文件前面使用require语句指定需要的依赖。

exorcist 创建来自browserify输出的分离的源映射文件，这对于测试非常有用。

下面是 browserify 插件:

• browserify-css – 打包时包含css ('./foo.css')
• stringify – 打包时包含html
• babelify – 转换 ES6 或 react 到旧的ES5版本，使用的是babel 编译器
  • babel-preset-2015 – 使用ES6
  • babel-preset-react – 使用react语法
• browserify-istanbul – 测试期间计算代码覆盖率，使用 istanbul.
• uglifyify – 使用 uglifyJS 压缩代码降低加载时间
• envify – 定义构建时变量，包括版本信息 (git tag, commit hash, build number)
• browserify-ngannotate – 自动化烦人 angularjs‘依赖注入工作。

 

eslint + karma + jasmine + phantomjs + 测试插件

 karma 有 “watch” 选项能够在代码改变时重新运行测试

• jasmine – 编写测试的库包
• phantomjs – 通过命令行运行测试的headless浏览器
• karma + 插件 – 测试运行器, 执行测试报告结果
  • karma-browserify – 结合 browserify ，能够使用ES6, require, 和计算代码覆盖率
  • karma-coverage – 编写代码覆盖率报告
  • karma-jasmine – 运行 jasmine 测试
  • karma-phantomjs-launcher – 在 phantomjs中运行测试
  • karma-junit-reporter – 使用与junit兼容xml编写测试结果，用于CI工具如Jenkins
• eslint – 静态分析是否有明显的坏味道代码

 

watchify + live-server + npm-run-all 活跃开发

编辑后随时刷新（reload-as-you-edit”）特性已经成为javascript产品环境一部分， 这样我们可能会有多个监视器，浏览器和终端窗口分别监测UI界面和测试输出，编辑器有另外一个监视器，这些都能简化开发，提高效率。

• watchify –  browserify的姐妹项目，当你更新文件时可高效更新大量相关包文件。
• live-server – HTTP 和 live-reload 服务器. 监视文件系统 当文件变化时告诉浏览器窗口刷新。
• npm-run-all – 跨平台帮助器能并行运行多个 npm scripts 

 

Javascript专题