(翻译)前端构建工具的比较

原文地址:https://survivejs.com/webpack/appendices/comparison/

在以前,是可以将你的脚本写在一起。 时代已经改变,现在将JavaScript代码分开来可能是一个复杂的工作。 随着单页应用程序(SPA)的兴起,这个问题已经升级。他们倾向于依靠一些有用的系统(来解决这个问题)。

出于这个原因,有多种策略来加载它们。您可以立即加载它们,或者考虑需要它们时加载。Webpack支持许多这样的策略。

Node和npm的流行,给它的包管理器提供了更多的使用环境。在npm普及之前,很难使用依赖项。有一段时间,人们开发出了前端特定的包管理器,但npm最终赢得了胜利。现在依赖管理比以前更容易了,尽管还需要克服一些挑战。

任务运行程序与打包

历史上,已经有很多构建工具。 Make可能是最着名的,它仍然是一个可行的选择。 专门的任务运行程序,如Grunt和Gulp,是专门为JavaScript开发人员创建的。 通过npm提供的插件使得任务运行程序都强大而且可扩展。 甚至可以使用npm脚本作为任务运行程序。 这很常见,特别是webpack。

任务运行程序是高水平的伟大工具。 它们允许您以跨平台方式执行操作。 当您需要将各种资源拼接在一起并生产时,问题就会开始。 出于此原因,存在资源整合程序,如Browserify,Brunch或webpack。

有一段时间,RequireJS很受欢迎。 它的核心是提供一个异步模块的方法并建立在此之上。 AMD的格式在后面将会有更详细的介绍。 幸运的是,这些标准已经赶上了,而且RequireJS似乎是一个很好的启发。

Make

就像1977年最初发布的那样,Make回来了。尽管它是一个旧工具,但它仍然是相关的。 Make允许您为各种目的编写单独的任务。 例如,您可以有不同的任务来创建生产构建,压缩JavaScript或运行测试。 您可以在许多其他工具中找到相同的方法。

尽管Make主要用于C项目,但它并不以任何方式与C绑定。 James Coglan详细讨论了如何使用在JavaScript中使用Mark。 看一下下面的詹姆斯帖子里介绍的压缩代码的方法:

Makefile

PATH  := node_modules/.bin:$(PATH)
SHELL := /bin/bash
 
source_files := $(wildcard lib/*.coffee)
build_files  := $(source_files:%.coffee=build/%.js)
app_bundle   := build/app.js
spec_coffee  := $(wildcard spec/*.coffee)
spec_js      := $(spec_coffee:%.coffee=build/%.js)
 
libraries    := vendor/jquery.js
 
.PHONY: all clean test
 
all: $(app_bundle)
 
build/%.js: %.coffee
    coffee -co $(dir $@) $<
 
$(app_bundle): $(libraries) $(build_files)
    uglifyjs -cmo $@ $^
 
test: $(app_bundle) $(spec_js)
    phantomjs phantom.js
 
clean:
    rm -rf build

使用Make,您可以使用Make-specific语法和终端命令为您的任务建模,使其可以与webpack集成。

RequireJS

RequireJS可能是第一个成为真正受欢迎的脚本加载程序。 它首先正确地引入了模块化JavaScript。 其最大的吸引力是AMD。 它引入了一个定义包装器:

define(['./MyModule.js'], function (MyModule) {
  return function() {}; // 模块入口
});
 
// 或者
define(['./MyModule.js'], function (MyModule) {
  return {
    hello: function() {...}, // 导出为模块函数
  };
});

顺便说一下,可以在包装器中使用require:

define(['require'], function (require) {
  var MyModule = require('./MyModule.js');
 
  return function() {...};
});

后一种方法更简洁一点。 但您仍然会遇到多余的代码。 ES6等标准解决了这个问题。

注意:Jamund Ferguson撰写了一篇关于如何从RequireJS移植到webpack的优秀博客系列。

npm脚本作为自动化构建工具

即使npm CLI(命令行界面)并非主要用于作为任务运行的程序,由于有package.json的脚本字段是之成为可能。 考虑下面的例子:

package.json

"scripts": {
  "stats": "webpack --env production --json > stats.json",
  "start": "webpack-dev-server --env development",
  "deploy": "gh-pages -d build",
  "build": "webpack --env production"
},

这些脚本可以使用npm run列出,然后使用npm run

你可能感兴趣的:((翻译)前端构建工具的比较)