有两种策略来加载它们,这么些标题早就升级

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

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

 

 

在以前,是能够将你的脚本写在一块儿。
时期已经济体改成,将来将JavaScript代码分开来可能是四个繁杂的行事。
随着单页应用程序(SPA)的兴起,那几个题材早已升高。他们帮忙于依靠一些卓有成效的系统(来缓解这么些难题)。

在原先,是能够将您的台本写在一块儿。
时期已经变更,未来将JavaScript代码分开来只怕是3个繁杂的做事。
随着单页应用程序(SPA)的起来,这几个难题已经升迁。他们扶助于依靠一些一蹴而就的体系(来消除这几个标题)。

鉴于这些原因,有三种国策来加载它们。您可以立刻加载它们,或许考虑须要它们时加载。Webpack援救广大这么的政策。

是因为那么些原因,有八种政策来加载它们。您能够即时加载它们,或然考虑须要它们时加载。Webpack帮忙广大这么的国策。

Node和npm的风行,给它的包管理器提供了更加多的利用环境。在npm奉行此前,很难使用注重项。有一段时间,人们开发出了前者特定的包管理器,但npm最后获得了凯旋。今后依靠管理比原先更便于了,纵然还必要克制一些挑战。

Node和npm的风行,给它的包管理器提供了越多的行使环境。在npm奉行之前,很难使用正视项。有一段时间,人们开发出了前者特定的包管理器,但npm最终收获了凯旋。现在依靠管理比从前更便于了,固然还要求制服一些挑衅。

 

 

职务运维程序与包装

职分运营程序与包装

正史上,已经有那些营造筑工程具。
Make恐怕是最着名的,它依然是1个管用的挑三拣四。
专门的职务运转程序,如Grunt和居尔p,是专门为JavaScript开发职员创设的。
通过npm提供的插件使得职分运营程序都有力而且可扩张。
甚至能够运用npm脚本作为职分运行程序。 那很宽泛,尤其是webpack。

野史上,已经有不可胜举创设筑工程具。
Make大概是最着名的,它如故是三个实用的精选。
专门的任务运维程序,如Grunt和居尔p,是特别为JavaScript开发人士创造的。
通过npm提供的插件使得任务运营程序都有力而且可扩张。
甚至能够利用npm脚本作为任务运转程序。 这很广泛,尤其是webpack。

职务运维程序是高品位的宏伟工具。 它们允许你以跨平台情势执行操作。
当您要求将各个财富拼接在一起并生育时,问题就会早先。
出于此原因,存在能源整合程序,如Browserify,Brunch或webpack。

职务运维程序是高品位的宏大工具。 它们允许你以跨平台方式进行操作。
当您须要将种种能源拼接在一起并生育时,难点就会起来。
出于此原因,存在能源整合程序,如Browserify,Brunch或webpack。

有一段时间,RequireJS很受欢迎。
它的骨干是提供二个异步模块的办法并树立在此之上。
AMD的格式在背后将会有更详尽的牵线。
幸运的是,那个专业已经碰到了,而且RequireJS仿佛是三个很好的开导。

有一段时间,RequireJS很受欢迎。
它的基本是提供二个异步模块的法子并建立在此之上。
英特尔的格式在背后将会有更详实的牵线。
幸运的是,那些规范已经遭遇了,而且RequireJS就像是2个很好的开导。

 

 

Make

Make

就像壹玖柒玖年早期发布的那样,Make回去了。就算它是多个旧工具,但它照旧是不非亲非故系的。
Make允许你为各样指标编写单独的职责。
例如,您能够有差异的任务来创设生产创设,压缩JavaScript或运转测试。
您能够在重重别的工具中找到同样的章程。

就如一九八〇年最初发布的那么,Make重回了。固然它是2个旧工具,但它仍旧是连锁的。
Make允许你为各个目标编写单独的任务。
例如,您能够有两样的天职来创立生产构建,压缩JavaScript或运维测试。
您能够在不少别的工具中找到同样的艺术。

就算Make首要用来C项目,但它并不以任何措施与C绑定。 詹姆斯Coglan详细谈论了如何行使在JavaScript中运用Mark
看一下底下的James帖子里介绍的缩减代码的艺术:

即使Make重要用来C项目,但它并不以任何方式与C绑定。 JamesCoglan详细切磋了何以行使在JavaScript中动用Mark
看一下下边包车型大巴詹姆士帖子里介绍的回落代码的章程:

Makefile

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
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集成。

应用Make,您能够应用Make-specific语法和顶峰命令为你的任务建立模型,使其得以与webpack集成。

 

 

RequireJS

RequireJS或者是首先个变成真正受欢迎的本子加载程序。
它首先科学地引入了模块化JavaScript。 其最大的吸重力是英特尔。
它引入了一个概念包装器:

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等实用程序。
在那里能够调用别的自动化创设工具来掩藏你正在利用的切实可行细节。
那样,您能够在维持界面相同的情事下利用重构工具。

 

RequireJS

RequireJS或是是率先个变为真正受欢迎的脚本加载程序。
它首先科学地引入了模块化JavaScript。 其最大的重力是速龙。
它引入了八个定义包装器:

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

 后一种艺术更简圣元(Synutra)点。 但您依旧会遇见多余的代码。
ES6等正规消除了那一个题材。

专注:Jamund
弗格森撰写了一篇有关如何从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

亿万先生官方网站: 1

 

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。

 

Grunt

亿万先生官方网站: 2

 

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

亿万先生官方网站: 3

Gulp利用两样的点子。
您不须要借助每一个插件的安顿,而是处理实际的代码。
居尔p建立在管道概念之上。 假如您了然Unix,那里也是同一的。
您必要根据以下概念:

  • 起点匹配文件。
  • 对来自执行操作的过滤器(例如,转换为JavaScript)
  •  接收模块库(例如,您的创设目录)在哪儿管理营造结果。

那是二个示范的居尔pfile,能够让您更好地问询从类别的README中获取的不二法门。
它被缩写为1个接口:

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类似的工具。
它借助于ES6产生器。

 

 

Gulp

亿万先生官方网站: 4

Gulp利用分化的不二法门。
您不要求依靠每一种插件的配置,而是处理实际的代码。
Gulp建立在管道概念之上。 若是您了解Unix,那里也是一致的。
您需求依照以下概念:

  • 来自匹配文件。
  • 对来源执行操作的过滤器(例如,转换为JavaScript)
  •  接收模块库(例如,您的创设目录)在何地管理营造结果。

这是二个演示的居尔pfile,能够让你更好地精通从项指标README中获得的主意。
它被缩写为3个接口:

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类似的工具。
它借助于ES6发生器。

 

 

Browserify

亿万先生官方网站: 5

拍卖JavaScript模块一向是一个标题。 js语言本身并未模块的概念,直到ES6。
Ergo,那几个语言在90时代被用在浏览器环境中。
已经建议了席卷AMD在内的各类化解方案。

Browserify是模块难题的一个缓解方案。
它能够将CommonJS模块捆绑在协同。
您能够将其与居尔p挂钩,您能够找到较小的变换工具,使您能够超过基本用法。
例如,watchify提供了2个在支付空闲的做事中间为您创立捆绑包的公文监视器。

Browserify生态系统由众多小模块组合。 那样,Browserify就符合Unix的见解。
Browserify比webpack更便于选拔,实际上它是三个很好的替代品。

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

 

Browserify

亿万先生官方网站: 6

处理JavaScript模块一向是一个题材。 js语言本人并未模块的定义,直到ES6。
Ergo,这么些语言在90年份被用在浏览器环境中。
已经提议了包括AMD在内的各类化解方案。

Browserify是模块难点的两个解决方案。
它能够将CommonJS模块捆绑在共同。
您可以将其与Gulp挂钩,您能够找到较小的变换工具,使您能够抢先基本用法。
例如,watchify提供了3个在开发空闲的干活之间为您创造捆绑包的文件监视器。

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

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

 

JSPM

亿万先生官方网站: 7

使用JSPM与原先的工具截然分歧。
它附带了1个融洽的命令行工具,用于将新的软件包安装到项目中,创立多少个生产包,等等。
它帮忙SystemJS插件,可以将各个格式加载到品种中。

 

JSPM

亿万先生官方网站: 8

使用JSPM与以前的工具截然差异。
它附带了2个谈得来的命令行工具,用于将新的软件包安装到项目中,创制二个生产包,等等。
它帮衬SystemJS插件,能够将各类格式加载到品种中。

 

Brunch

亿万先生官方网站: 9

与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有多少个实验性的热模块重新加载程序

 

Brunch

亿万先生官方网站: 10

与居尔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

亿万先生官方网站: 11

您能够说Webpack利用比Browserify更单一的情势。
Browserify由两个小工具组成,而Webpack提供了3个着力,它提供了无数创建性的效益。

Webpack大旨能够使用一定的加载程序和插件进行增加。
它能够决定什么消除模块,使你能够调整你的创设以相当特定情景和缓解无法符合规律运行的软件包。

与其余工具相比较,Webpack具有初阶复杂性,但经过其广大的功能集成能够弥补那或多或少。
那是八个索要耐心的尖端工具。
但是如若领悟了幕后的基本思路,webpack就变得很强大。

 

其他选项

您可以找到越多替代品,如下所列:

  • pundle宣传自个儿看做下一代打包工具,并尤其注意其脾气。
  • Rollup要害关怀打包es6的代码。Tree
    shaking是其卖点之一。您能够应用Rollup与webpack的加载程序rollup-loader
  • AssetGraph选拔完全差异的方法,建立在HTML语义之上,使其变成超链接分析组织分析的大好选取。webpack-assetgraph-plugin将webpack和AssetGraph结合在一块。
  • FuseBox是1个瞩目于速度的卷入工具。
    它应用零配置方式,目的在于开箱即用。
  • StealJS是三个借助加载器,3个留意于质量和易用性的构建工具。
  • Flipbox将八个捆绑打包在一个集合的界面后边。

 

结语

正史上早已有俯拾便是JavaScript的塑造筑工程具。
每种人都试图以团结的办法消除2个一定的标题。
那一个标准早已起来迎头赶上,基本语义的须求也更少了。
相反,工具得以在更高层次上竞争,并有助于更好的用户体验。
平日,您可以联手行使几个单身的缓解方案。

因此看来:

  • 自动化营造筑工程具和打包工具化解不相同的题材。
    您能够通过双方达成类似的结果,但一般最好将它们一起行使来相互补充。
  • 较早的工具(如Make或RequireJS)仍旧拥有影响力,尽管它们在前端开发中不如往年那么受欢迎。
  • Bundinner如Browserify或webpack化解了一个至关心珍视要的标题,并支持您管理复杂的Web应用程序。
  • 有的新生技术从差别的角度解决难题。
    有时候它们创设在其它工具之上,有时它们能够同步利用。

 

Webpack

亿万先生官方网站: 12

你可以说Webpack行使比Browserify更单一的办法。
Browserify由五个小工具组成,而Webpack提供了贰个着力,它提供了无数创建性的功力。

Webpack宗旨能够选用一定的加载程序和插件实行扩张。
它可以控制什么消除模块,使您能够调整你的营造以合营特定情景和消除无法平常运营的软件包。

与其余工具相比较,Webpack具有发轫复杂性,但通过其广大的职能集成能够弥补那或多或少。
这是2个亟需耐心的高等级工具。
不过只要掌握了背后的基本思路,webpack就变得很强劲。

 

其它选用

你能够找到更加多替代品,如下所列:

  • pundle宣传本人视作下一代打包工具,并特别注意其性质。
  • Rollup重在关切打包es6的代码。Tree
    shaking是其卖点之一。您可以选拔Rollup与webpack的加载程序rollup-loader
  • AssetGraph动用完全区别的点子,建立在HTML语义之上,使其改为超链接分析组织分析的优良选拔。亿万先生官方网站:,webpack-assetgraph-plugin将webpack和AssetGraph结合在一块。
  • FuseBox是二个小心于速度的卷入工具。
    它应用零配置方式,意在开箱即用。
  • StealJS是一个依靠加载器,贰个注意于品质和易用性的营造筑工程具。
  • Flipbox将多个捆绑打包在一个集合的界面后边。

 

结语

正史上早已有那个JavaScript的构建工具。
每种人都试图以温馨的主意化解1个一定的标题。
这一个标准早已上马迎头赶上,基本语义的须求也更少了。
相反,工具得以在更高层次上竞争,并推进更好的用户体验。
经常,您可以联手行使多少个单身的缓解方案。

由此看来:

  • 自动化营造筑工程具和打包工具化解不一致的题材。
    您能够透过双方实现类似的结果,但一般最好将它们一起行使来互相补充。
  • 较早的工具(如Make或RequireJS)还是拥有影响力,固然它们在前端开发中不如往年那么受欢迎。
  • Bundinner如Browserify或webpack消除了贰个要害的标题,并支援您管理复杂的Web应用程序。
  • 有个别新生技术从分化的角度化解难题。
    有时候它们创造在其它工具之上,有时它们能够同步利用。

 

相关文章

网站地图xml地图