(翻译)前端营造筑工程具的可比

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

在从前,是能够将你的本子写在一块儿。
时代已经济体制改善成,未来将JavaScript代码分开来或者是一个繁杂的行事。
随着单页应用程序(SPA)的兴起,这么些标题早就晋级。他们协助于依靠一些实惠的类别(来缓慢解决那几个难题)。

由于这么些原因,有各个政策来加载它们。您能够马上加载它们,或然思索供给它们时加载。Webpack帮忙广大这样的国策。

Node和npm的盛行,给它的包管理器提供了越多的接纳条件。在npm推广此前,很难使用重视项。有1段时间,人们开采出了前者特定的包管理器,但npm最后获得了凯旋。现在依赖管理比原先更便于了,即便还须要制伏一些挑战。

职分运营程序与包装

野史上,已经有不胜枚举创设筑工程具。
Make恐怕是最着名的,它仍然是一个管用的选择。
专门的天职运营程序,如Grunt和居尔p,是专程为JavaScript开荒职员创设的。
通过npm提供的插件使得职务运行程序都有力而且可扩张。
以至足以运用npm脚本作为天职运维程序。 那很广泛,尤其是webpack。

任务运转程序是高品位的大侠工具。 它们允许你以跨平台格局进行操作。
当您必要将各个财富拼接在协同并生育时,难题就会初阶。
出于此原因,存在财富整合程序,如Browserify,Brunch或webpack。

有一段时间,RequireJS十分受招待。
它的为主是提供3个异步模块的方法并确立在此之上。
速龙的格式在后面将会有更详尽的介绍。
幸运的是,那几个专门的工作早已蒙受了,而且RequireJS仿佛是一个很好的启迪。

Make

就像1977年终期发布的那么,Make归来了。即便它是贰个旧工具,但它依旧是连锁的。
Make允许你为各样目的编写单独的任务。
比如,您能够有两样的天职来创立生产营造,压缩JavaScript或运转测试。
您能够在点不清别样工具中找到同样的法门。

即使Make首要用来C项目,但它并不以任何方式与C绑定。 JamesCoglan详细评论了何以行使在JavaScript中动用马克
看一下上面包车型客车James帖子里介绍的回落代码的法门:

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。 其最大的引力是英特尔。
它引进了3个概念包装器:

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() {...};
});

后1种格局更简短一点。 但您还是会碰到多余的代码。
ES6等正规消除了那些标题。

只顾:Jamund
弗格森撰写了1篇有关什么从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,那里也是1模同样的。
您要求遵从以下概念:

  • 来源相配文件。
  • 对来自实行操作的过滤器(比方,转变为JavaScript)
  • 收下模块库(举个例子,您的营造目录)在哪儿管理塑造结果。

那是三个示范的居尔pfile,能够让您更加好地询问从项目标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']
);

是因为配置是代码,假设碰着麻烦,您总是能够将其除去。
您能够将现存的节点包作为居尔p插件,等等。
与Grunt比较,您能够更领会地问询发生了怎么。
就算如此,你依旧最终写了多数模板作为闲时职务。 那就是立异的艺术。

注意:webpack-stream允许你在居尔p遇到中央银行使webpack。

注意:Fly是与居尔p类似的工具。
它借助于ES陆发生器。

Browserify

管理JavaScript模块一贯是三个难点。 js语言自己亥有模块的定义,直到ES6。
Ergo,那些语言在90时代被用在浏览器情状中。
已经建议了归纳AMD在内的各个化解方案。

Browserify是模块难点的1个消除方案。
它可以将CommonJS模块捆绑在协同。
您可以将其与Gulp挂钩,您能够找到异常的小的调换工具,使您能够超越基本用法。
比如,watchify提供了贰个在付出空闲的干活之间为您创立捆绑包的文件监视器。

Browserify生态系统由众多小模块组合。 那样,Browserify就符合Unix的视角。
Browserify比webpack更便于接纳,实际上它是二个很好的替代品。

注意:Splittable是3个Browserify包装器,允许代码分割,帮衬ES六开箱即用,Tree
shaking等等。

JSPM

使用JSPM与原先的工具天悬地隔。
它附带了八个融洽的命令行工具,用于将新的软件包安装到项目中,创造二个生产包,等等。
它援救SystemJS插件,能够将种种格式加载到品种中。

Brunch

与居尔p比较,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爱抚关怀打包es陆的代码。Tree
    shaking是其卖点之一。您能够应用Rollup与webpack的加载程序rollup-loader
  • AssetGraph运用完全差异的艺术,建立在HTML语义之上,使其产生超链接分析协会分析的漂亮选取。webpack-assetgraph-plugin将webpack和AssetGraph结合在联合。
  • FuseBox是二个注意于速度的卷入工具。
    它选拔零配置方式,意在开箱即用。
  • StealJS是3个借助加载器,一个瞩目于品质和易用性的创设筑工程具。
  • Flipbox将八个捆绑打包在3个统一的界前面边。

结语

野史上曾经有这一个JavaScript的营造筑工程具。
每一种人都准备以团结的不2诀窍化解二个一定的标题。
那么些规范早已伊始迎头超过,基本语义的须要也越来越少了。
相反,工具得以在更高档期的顺序上竞争,并拉动更加好的用户体验。
平常,您能够联手行使多少个单身的缓和方案。

如上所述:

  • 自动化营造筑工程具和包裹工具消除不一样的主题材料。
    您可以经过双边完毕类似的结果,但平日最棒将它们一齐行使来互相补充。
  • 较早的工具(如Make或RequireJS)照旧具备影响力,固然它们在前端开辟中不及往年那么受接待。
  • Bundinner如Browserify或webpack消除了二个主要的难点,并帮衬您管理复杂的Web应用程序。
  • 1对新兴工夫从分裂的角度消除难题。
    有时候它们建立在别的工具之上,有时它们得以联手行使。

原博客备份