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 插件:

 

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

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

 

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

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

 

Javascript专题