有三种国策来加载它们

在原先,是足以将您的本子写在一起。
时期一度更换,以后将JavaScript代码分开来或者是一个复杂的办事。
随着单页应用程序(SPA)的起来,那些标题早就进级。他们支持于凭借一些实惠的种类(来化解那些主题素材)。

Grunt

Grunt在前端开采人士中是最受接待的。它的插件架构有助于它的风行,插件本人平日是繁体的,因而,当配置扩张时,很难知晓到底发生了哪些。

以下是Grunt文书档案的言传身教
在此布置中,您定义一个linting和2个调查职分。
当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有用的2个重中之重片段是它隐藏了汪洋的底细。

从远来讲,那大概会卓殊。从Grunt的创设进度,你很难理解它引擎专门的学业的具体情形。

注意:grunt-webpack插件允许你在Grunt碰到中使用webpack,同时将应用阶段升高到Webpack。

结语

野史上曾经有不少JavaScript的构建工具。
每一种人都准备以协和的方法解决贰个特定的标题。
那些标准早已起来迎头凌驾,基本语义的渴求也更加少了。
相反,工具得以在更加高档期的顺序上竞争,并有助于更加好的用户体验。
平日,您能够一齐行使多少个独立的消除方案。

总的来讲:

  • 自动化构建筑工程具和包裹工具化解分歧的主题素材。
    您能够通过双边落成类似的结果,但常见最棒将它们一同行使来相互补充。
  • 较早的工具(如Make或RequireJS)如故有所影响力,即便它们在前端开垦中比不上往年那么受招待。
  • Bundinner如Browserify或webpack消除了三个注重的难题,并扶持您管理复杂的Web应用程序。
  • 部分新生技能从不一致的角度消除难题。
    有的时候候它们成立在其余工具之上,不常它们能够一齐行使。

原博客备份

Gulp

Gulp利用差异的办法。
您无需依据每一个插件的配置,而是管理实际的代码。
居尔p创立在管道概念之上。 要是您熟练Unix,这里也是壹致的。
您必要依照以下概念:

  • 来源相称文件。
  • 对来自推行操作的过滤器(举例,转变为JavaScript)
  • 吸收接纳模块库(举例,您的营造目录)在何地管理创设结果。

那是3个示范的居尔pfile,能够让您更加好地问询从品种的README中收获的不2秘技。
它被缩写为叁个接口:

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允许你在居尔p情况中选取webpack。

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

JSPM

使用JSPM与原先的工具何啻天壤。
它附带了一个和好的命令行工具,用于将新的软件包安装到品种中,创立多少个生产包,等等。
它援助SystemJS插件,能够将各个格式加载到花色中。

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

职责运转程序与包装

野史上,已经有过多营造筑工程具。
Make恐怕是最着名的,它依旧是多个使得的选择。
特地的天职运营程序,如Grunt和居尔p,是专程为JavaScript开垦人士创造的。
通过npm提供的插件使得职分运转程序都庞大而且可扩充。
以至足以行使npm脚本作为天职运转程序。 那很宽泛,极度是webpack。

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

有1段时间,RequireJS非常受应接。
它的着力是提供3个异步模块的点子并建设构造在此之上。
英特尔的格式在前面将会有更详细的介绍。
幸运的是,那一个规范已经境遇了,而且RequireJS就像是是1个很好的启示。

Make

就像是一玖七6年早期宣布的这样,Make归来了。就算它是3个旧工具,但它还是是连锁的。
Make允许你为种种指标编写单独的职分。
例如,您能够有两样的天职来创立生产营造,压缩JavaScript或运维测试。
您能够在点不清任何工具中找到一样的艺术。

纵然Make重要用来C项目,但它并不以任何情势与C绑定。 詹姆斯Coglan详细商酌了什么样行使在JavaScript中使用马克
看一下上边包车型大巴詹姆士帖子里介绍的回落代码的艺术:

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

Webpack

你能够说Webpack行使比Browserify更单一的措施。
Browserify由两个小工具组成,而Webpack提供了一个主导,它提供了重重创立性的机能。

Webpack大旨能够选择一定的加载程序和插件进行扩大。
它能够调整什么消除模块,使您能够调节你的创设以十二分特定情景和解决不可能正常运维的软件包。

与别的工具相比较,Webpack具有开始复杂性,但通过其广大的效益集成能够弥补这或多或少。
那是贰个亟需耐心的高端级工具。
不过一旦通晓了背后的基本思路,webpack就变得很庞大。

鉴于这几个缘故,有三种国策来加载它们。您能够登时加载它们,或许考虑须要它们时加载。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() {...};
});

后一种办法更简美赞臣点。 但您依然会遇上多余的代码。
ES六等专门的学问化解了那些标题。

在意:Jamund
福开森撰写了1篇有关什么从RequireJS移植到webpack的大好博客体系。

其它选拔

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

  • pundle鼓吹本身看成下一代打包工具,并非常注意其性质。
  • Rollup重中之重关怀打包es6的代码。Tree
    shaking是其卖点之1。您能够使用Rollup与webpack的加载程序rollup-loader
  • AssetGraph采纳完全两样的主意,创设在HTML语义之上,使其成为超链接深入分析结构深入分析的手不释卷采用。webpack-assetgraph-plugin将webpack和AssetGraph结合在同步。
  • FuseBox是四个注意于速度的包装工具。
    它应用零配置格局,目的在于开箱即用。
  • StealJS是二个借助加载器,八个瞩目于品质和易用性的营造工具。
  • Flipbox将多少个捆绑打包在多个集结的分界面后边。

Node和npm的流行,给它的包管理器提供了更加的多的应用条件。在npm遍布此前,很难使用信赖项。有一段时间,大家开采出了前者特定的包管理器,但npm最后获得了胜利。今后依赖管理比在此之前更易于了,尽管还亟需战胜一些挑战。

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有2个试验性的热模块重新加载程序

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等实用程序。
在那边能够调用其余自动化创设筑工程具来掩藏你正在利用的有血有肉细节。
那样,您能够在维持分界面一样的情事下利用重构工具。

Browserify

管理JavaScript模块一向是2个难题。 js语言本人未有模块的概念,直到ES陆。
Ergo,那个语言在90年间被用在浏览器境况中。
已经提议了总结AMD在内的各类消除方案。

Browserify是模块难题的七个化解方案。
它能够将CommonJS模块捆绑在壹块儿。
您能够将其与居尔p挂钩,您能够找到十分的小的转移工具,使您能够超越基本用法。
举例,watchify提供了一个在付出空闲的劳作之间为您创设捆绑包的文书监视器。

Browserify生态系统由大多小模块组合。 这样,Browserify就适合Unix的眼光。
Browserify比webpack更便于选用,实际上它是2个很好的代替品。

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

相关文章

网站地图xml地图