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
猜你喜欢