初稿地址:https://survivejs.com/webpack/appendices/comparison/

在从前,是足以将你的剧本写在一块。
时代一度变更,现在将JavaScript代码分开来或者是一个复杂的工作。
随着单页应用程序(SPA)的起来,这一个题目一度升任。他们帮忙于依靠一些行之有效的系列(来解决这么些题材)。

由于这么些缘故,有多种策略来加载它们。您可以即刻加载它们,或者考虑需要它们时加载。Webpack协理广大这么的政策。

Node和npm的盛行,给它的包管理器提供了更多的拔取条件。在npm普及在此之前,很难使用看重项。有一段时间,人们开发出了前者特定的包管理器,但npm最终收获了制服。现在凭借管理比原先更易于了,虽然还亟需打败一些挑衅。

职责运行程序与包装

历史上,已经有成千上万构建工具。
Make可能是最着名的,它仍旧是一个得力的取舍。
专门的职责运行程序,如Grunt和Gulp,是特地为JavaScript开发人士创制的。
通过npm提供的插件使得任务运行程序都强大而且可扩张。
甚至足以使用npm脚本作为天职运行程序。 这很广泛,特别是webpack。

任务运行程序是高水准的宏伟工具。 它们允许你以跨平台格局实施操作。
当您需要将各样资源拼接在一道并生育时,问题就会起来。
出于此原因,存在资源整合程序,如Browserify,Brunch或webpack。

有一段时间,RequireJS很受欢迎。
它的为主是提供一个异步模块的法子并创造在此之上。
Intel的格式在后头将会有更详尽的牵线。
幸运的是,这多少个专业已经遭受了,而且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。 其最大的引力是Intel。
它引入了一个概念包装器:

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 <script>执行。
您还足以应用诸如test:watch这样的预约命名空间。
这种办法能够使它保持跨平台。

取代使用rm -rf,您可能更愿意采用诸如rimraf等实用程序。
在此地可以调用其他自动化构建工具来掩藏你正在使用的现实细节。
这样,您能够在保障界面相同的气象下选用重构工具。

Grunt

Grunt在前端开发人士中是最受欢迎的。它的插件架构有助于它的风行,插件本身平时是错综复杂的,因而,当配置扩充时,很难知晓到底爆发了哪些。

以下是Grunt文档的以身作则
在此布局中,您定义一个linting和一个观赛任务。
当watch任务运行时,它也会触发lint任务。
这样,当您运行Grunt时,您能够在编辑源代码时在顶峰中实时发出警示。

Gruntfile.js

module.exports = (grunt) => {
  grunt.initConfig({
    lint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true,
        },
      },
    },
    watch: {
      files: ['<%= lint.files %>'],
      tasks: ['lint'],
    },
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['lint']);
};

在实践中,您将有很多小的任务用于特定目标,例如构建项目。
Grunt有用的一个重点部分是它隐藏了大气的底细。

从远来说,这或者会有题目。从Grunt的构建过程,你很难通晓它引擎工作的具体意况。

注意:grunt-webpack插件允许你在Grunt环境中运用webpack,同时将利用阶段提高到Webpack。

Gulp

Gulp使用两样的点子。
您不需要借助每个插件的布置,而是处理实际的代码。
Gulp建立在管道概念之上。 假设你了解Unix,这里也是一律的。
您需要服从以下概念:

  • 出自匹配文件。
  • 对来源执行操作的过滤器(例如,转换为JavaScript)
  • 收到模块库(例如,您的构建目录)在什么地方管理构建结果。

这是一个演示的Gulpfile,可以让您更好地打遵循项目的README中获得的艺术。
它被缩写为一个接口:

Gulpfile.js

const gulp = require('gulp');
const coffee = require('gulp-coffee');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const del = require('del');

const paths = {
  scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee']
};

// 并不是所有的任务都需要使用流
// 一个gulpfile是另一个节点程序
// 你也可以在npm上使用所有的软件包
gulp.task(
  'clean',
  del.bind(null, ['build']
);

gulp.task(
  'scripts',
  ['clean'],
  () => (
    // 压缩和复制所有的JavaScript(除了供应商脚本)
    // 源代码一路下来
    gulp.src(paths.scripts)
      // 管道内
      .pipe(sourcemaps.init())
        .pipe(coffee())
        .pipe(uglify())
        .pipe(concat('all.min.js'))
      .pipe(sourcemaps.write())
      .pipe(gulp.dest('build/js'))
  )
);

// 文件更改时重新运行任务
gulp.task(
  'watch',
  gulp.watch.bind(null, paths.scripts, ['scripts'])
);

// 默认任务(从CLI运行`gulp`时调用)
gulp.task(
  'default',
  ['watch', 'scripts']
);

鉴于配置是代码,假使遇上麻烦,您总是可以将其除去。
您可以将长存的节点包作为Gulp插件,等等。
与Grunt相相比较,您可以更清楚地精晓暴发了怎样。
即便如此,你照样最终写了成百上千模板作为闲时任务。 这就是革新的不二法门。

注意:webpack-stream同意你在Gulp环境中使用webpack。

注意:Fly是与Gulp类似的工具。
它借助于ES6爆发器。

Browserify

处理JavaScript模块平昔是一个题目。 js语言本身没有模块的定义,直到ES6。
Ergo,那一个语言在90年代被用在浏览器环境中。
已经提议了席卷AMD在内的各类解决方案。

Browserify是模块问题的一个化解方案。
它可以将CommonJS模块捆绑在共同。
您可以将其与Gulp挂钩,您可以找到较小的变换工具,使你可以领先基本用法。
例如,watchify提供了一个在支付空闲的劳作中间为你创立捆绑包的文件监视器。

Browserify生态系统由许多小模块组合。 这样,Browserify就适合Unix的观点。
Browserify比webpack更便于选取,实际上它是一个很好的替代品。

注意:Splittable是一个Browserify包装器,允许代码分割,援助ES6开箱即用,Tree
shaking等等。

JSPM

使用JSPM与原先的工具截然不同。
它附带了一个和好的命令行工具,用于将新的软件包安装到品种中,创造一个生产包,等等。
它帮忙SystemJS插件,可以将各个格式加载到品种中。

Brunch

与Gulp相比,Brunch在更高层次的架空上运行。
它应用类似于webpack的阐明方法。
以示范为例,您可以设想从Brunch网站改编以下配置:

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'vendor.js': /^(?!app)/,
        'app.js': /^app/,
      },
    },
    stylesheets: {
      joinTo: 'app.css',
    },
  },
  plugins: {
    babel: {
      presets: ['es2015', 'react'],
    },
    postcss: {
      processors: [require('autoprefixer')],
    },
  },
};

Brunch包括像brunch new, brunch watch –server, and brunch build
–production。 它含有了不少创设性的机能,可以使用插件增添。

在意:Brunch有一个试验性的热模块重新加载程序

Webpack

您可以说Webpack采纳比Browserify更单一的法子。
Browserify由两个小工具组成,而Webpack提供了一个主干,它提供了很多创建性的效果。

Webpack核心可以行使一定的加载程序和插件举行扩充。
它可以控制什么缓解模块,使您可以调整你的构建以配合特定情景和解决不可以正常运行的软件包。

与其余工具相比较,Webpack具有起先复杂性,但透过其大规模的功效集成可以弥补这或多或少。
这是一个索要耐心的高级工具。
但是假使驾驭了背后的基本思路,webpack就变得很强劲。

其他接纳

你可以找到更多替代品,如下所列:

  • pundle宣传自己视作下一代打包工具,并特别注意其属性。
  • Rollup重在关注打包es6的代码。Tree
    shaking是其卖点之一。您可以行使Rollup与webpack的加载程序rollup-loader
  • AssetGraph拔取完全两样的法子,建立在HTML语义之上,使其变成超链接分析布局解析的杰出选用。webpack-assetgraph-plugin将webpack和AssetGraph结合在一块。
  • FuseBox是一个留意于速度的卷入工具。
    它应用零配置形式,目的在于开箱即用。
  • StealJS是一个凭借加载器,一个瞩目于性能和易用性的构建工具。
  • Flipbox将六个捆绑打包在一个统一的界面后边。

结语

正史上业已有很多JavaScript的构建工具。
每个人都计较以自己的法子化解一个特定的问题。
这么些专业早已上马迎头赶上,基本语义的要求也更少了。
相反,工具得以在更高层次上竞争,并促进更好的用户体验。
日常,您可以一并使用多少个单身的化解方案。

由此看来:

  • 自动化构建工具和包装工具解决不同的问题。
    您可以通过双方实现类似的结果,但平时最好将它们一起使用来相互补充。
  • 较早的工具(如Make或RequireJS)依然保有影响力,即便它们在前端开发中不如往年这样受欢迎。
  • Bundinner如Browserify或webpack解决了一个重大的问题,并拉扯你管理复杂的Web应用程序。
  • 有的新兴技术从不同的角度解决问题。
    有时候它们建立在任何工具之上,有时它们得以联手行使。

原博客备份

相关文章

网站地图xml地图