NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

Question

我正在尝试总结我对最流行的JavaScript包管理器,捆绑包和任务运行器的了解.如果我错了,请纠正我:

• npm&bower是包管理员.他们只是下载依赖项,不知道如何自己构建项目.他们知道的是在获取所有依赖项之后调用webpack/ gulp/ grunt.
• bower就像npm,但是构建了扁平的依赖树(不像npm递归那样).含义npm获取每个依赖项的依赖项(可能会获取相同的几次),同时bower期望您手动包含子依赖项.有时bower并npm分别用于前端和后端(因为每兆字节在前端可能很重要).
• grunt并且gulp是任务运行者自动化所有可以自动化的东西(即编译CSS/Sass,优化图像,制作捆绑并缩小/转换它).
• gruntvs. gulp(就像mavenvs. gradle或配置与代码).Grunt基于配置单独的独立任务,每个任务打开/处理/关闭文件.Gulp需要的代码量较少,并且基于节点流,这使得它可以构建管道链(无需重新打开同一个文件)并使其更快.
• webpack(webpack-dev-server) - 对我来说,这是一个热门重新加载更改的任务运行器,可以让你忘记所有JS/CSS观察者.
• npm/ bower+ plugins可以替换任务运行器.他们的能力经常交叉,所以如果你需要使用gulp/ gruntover npm+插件,会有不同的含义.但是,跑步者的任务是复杂的任务肯定更好(例如,"每个建设创建捆绑,从ES6 transpile到ES5,在所有浏览器模拟器中运行它,使屏幕截图和部署通过FTP收存箱").
• browserify允许为浏览器打包节点模块.browserifyvs node的require实际上是AMD vs CommonJS.

问题:

1. 什么是webpack&webpack-dev-server？官方文档说它是一个模块捆绑器,但对我来说它只是一个任务运行器.有什么不同？
2. 你会在哪里使用browserify？我们不能对node/ES6导入做同样的事情吗？
3. 你什么时候使用gulp/ gruntover npm+插件？
4. 当您需要使用组合时,请提供示例

Answer 1

Webpack和Browserify

Webpack和Browserify几乎完成相同的工作,即处理您的代码以在目标环境中使用(主要是浏览器,但您可以定位其他环境,如Node).这种处理的结果是一个或多个捆绑 - 适合目标环境的汇编脚本.

例如,假设您编写了一个分为模块的ES6代码,并希望能够在浏览器中运行它.如果这些模块是节点模块,浏览器将无法理解它们,因为它们仅存在于节点环境中.ES6模块也不适用于IE11等旧版浏览器.此外,您可能已经使用了浏览器尚未实现的实验语言功能(ES下一个提议),因此运行此类脚本只会引发错误.像Webpack和Browserify这样的工具通过将这些代码转换为能够执行的表单浏览器来解决这些问题.最重要的是,它们可以对这些捆绑包应用各种各样的优化.

但是,Webpack和Browserify在许多方面有所不同,Webpack默认提供了许多工具(例如代码分割),而Browserify只能在下载插件后才能执行此操作,但使用两者导致非常相似的结果.归结为个人偏好(Webpack更具时尚性).顺便说一句,Webpack不是一个任务运行器,它只是文件的处理器(它通过所谓的加载器和插件处理它们),它可以由任务运行器运行(以及其他方式).

Webpack Dev Server

Webpack Dev Server为Browsersync提供了类似的解决方案 - 一个开发服务器,您可以在其中快速部署应用程序,并立即验证您的开发进度,开发服务器自动刷新浏览器代码更改甚至将更改的代码传播到浏览器无需重新加载所谓的热模块更换.

任务运行器与NPM脚本

我一直在使用Gulp的简洁和简单的任务写作,但后来发现我根本不需要Gulp和Grunt.我所需要的一切都可以使用NPM脚本通过其API运行第三方工具.在Gulp,Grunt或NPM脚本之间进行选择取决于团队的品味和经验.

虽然Gulp或Grunt中的任务很容易阅读,即使对于不太熟悉JS的人来说,它也是另一种需要和学习的工具,我个人更喜欢缩小我的依赖关系并使事情变得简单.另一方面,使用NPM脚本和运行第三方工具(例如,节点脚本配置和运行rimraf以进行清理)的(可运行的JS)脚本的组合替换这些任务可能更具挑战性.但在大多数情况下,这三者在结果方面是平等的.

例子

至于这些例子,我建议你看看这个React启动项目,它展示了一个包含整个构建和部署过程的NPM和JS脚本的完美组合.您可以在根文件夹中的package.json中的名为的属性中找到这些NPM脚本scripts.那里你会遇到像这样的命令babel-node tools/run start.Babel-node是一个CLI工具(不适合生产使用),它首先编译ES6文件tools/run(位于工具中的 run.js文件) - 基本上是一个运行器实用程序.这个运行器将一个函数作为参数并执行它,在这种情况下是start- 另一个实用程序(start.js)负责捆绑源文件(客户端和服务器)并启动应用程序和开发服务器(开发服务器可能是Webpack Dev Server或Browsersync).

更准确地说,start.js创建客户端和服务器端捆绑包,启动快速服务器并在成功启动后进入浏览器同步,在编写本文时看起来像这样(请参阅反应启动项目以获取最新代码).

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)

重要的是proxy.target,他们设置了他们想要代理的服务器地址,可以是http:// localhost:3000,而Browsersync启动服务器监听http:// localhost:3001,其中生成的资产通过自动更改提供检测和热模块更换.正如您所看到的,还有另一个files具有单独文件或模式的配置属性浏览器同步监视更改并重新加载浏览器(如果有的话),但正如评论所说,Webpack负责用HMR自己观看js源,因此他们合作那里.

现在我没有任何这样的Grunt或Gulp配置的等效示例,但是使用Gulp(和Grunt有些相似),您可以在gulpfile.js中编写单独的任务

gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});

你在哪里做的几乎和初学者工具箱一样,这次是使用任务运行器,它为你解决了一些问题,但在学习使用过程中提出了自己的问题和一些困难,正如我所说,你拥有的依赖性越多,就越容易出错.这就是我想摆脱这些工具的原因.

Answer 2

2018年10月更新

如果您仍然不确定前端开发,可以在这里快速浏览一下优秀的资源.

https://github.com/kamranahmedse/developer-roadmap

2018年6月更新

如果你从一开始就不去那里学习现代JavaScript很难.如果您是新来者,请记得查看这篇优秀的文章,以便更好地了解.

https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

2017年7月更新

最近我发现了一个非常全面的Grab团队指南,介绍如何在2017年进行前端开发.您可以查看下面的内容.

https://github.com/grab/front-end-guide

我也一直在寻找这个,因为那里有很多工具,每个工具都有不同的方面让我们受益.社区分为不同的工具Browserify, Webpack, jspm, Grunt and Gulp.你可能也听说过Yeoman or Slush.这不是一个真正的问题,对于每个试图理解明确前进道路的人来说,这只会令人困惑.

无论如何,我想贡献一些东西.

1.包管理器

软件包管理器简化了项目依赖项的安装和更新,这些项目依赖项是以下库:jQuery, Bootstrap- 等在您的站点上使用但不是由您编写的所有内容.

浏览所有图书馆网站,下载和解压缩档案,将文件复制到项目中 - 所有这些都被终端中的一些命令所取代.

• NPM代表:Node JS package manager帮助您管理软件所依赖的所有库.您可以在命令行中调用package.json并运行的文件中定义您的需求npm install...然后BANG,您的软件包已下载并可供使用.可以用于front-end and back-end图书馆.

• Bower:对于前端包管理,概念与NPM相同.所有库都存储在一个名为的文件中bower.json,然后bower install在命令行中运行.

Bower和之间的最大区别NPM是NPM执行嵌套依赖树,而Bower需要平面依赖树,如下所示.

引用Bower和npm有什么区别？

NPM

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A 
    -> dependency D

鲍尔

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

有一些更新npm 3 Duplication and Deduplication,请打开文档了解更多详情.

• Yarn:最近JavaScript 发布的新包管理器,Facebook与之相比具有更多优势NPM.使用Yarn,您仍然可以使用两者NPM和Bower注册表来获取包.如果您之前安装过软件包,则yarn创建一个便于使用的缓存副本offline package installs.

• jspm:是一个SystemJS通用模块加载器的包管理器,构建在动态ES6模块加载器之上.它不是一个全新的包管理器,它有自己的一套规则,而是在现有的包源之上工作.开箱即用,它适用于GitHub和npm.由于大多数Bower基础包都是基于的GitHub,我们也可以使用这些包安装jspm.它有一个注册表,列出了大多数常用的前端软件包,以便于安装.

看到不同之间Bower和jspm: 包管理器:鲍尔VS JSPM

2.模块加载器/捆绑

任何规模的大多数项目都将在许多文件之间分配代码.您可以只使用单个<script>标记包含每个文件,但是,<script>建立新的http连接,对于小文件 - 这是模块化的目标 - 设置连接的时间可能比传输数据要长得多.下载脚本时,页面上不能更改任何内容.

• 下载时间的问题可以通过将一组简单模块连接成一个文件并将其缩小来解决.

例如

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>

• 然而,性能是以牺牲灵活性为代价的.如果您的模块具有相互依赖性,那么这种缺乏灵活性可能会成为一个障碍.

例如

<head>
    <title>Skateboard</title>
    <script src=“connectors/axle.js”></script>
    <script src=“frames/board.js”></script>
    <!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
    <script src=“rolling-things/abstract-rolling-thing.js”></script>
    <script src=“rolling-things/wheels/skateboard-wheel.js”></script>
    <!-- but if skateboard-wheel also depends on ball-bearing -->
    <!-- then having this script tag here could cause a problem -->
    <script src=“rolling-things/ball-bearing.js”></script>
    <!-- connect wheels to axle and axle to frame -->
    <script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>

计算机可以做得更好,这就是为什么你应该使用工具自动将所有内容捆绑到一个文件中.

然后我们听说RequireJS,Browserify,Webpack和SystemJS

• RequireJS:是一个JavaScript文件和模块加载器.它针对浏览器内使用进行了优化,但可以在其他JavaScript环境中使用,例如Node.

例如:myModule.js

// package/lib is a dependency we require
define(["package/lib"], function (lib) {

    // behavior for our module
    function foo() {
        lib.log( "hello world!" );
    }

    // export (expose) foo to other modules as foobar
    return {
        foobar: foo
    }
});

在main.js,我们可以导入myModule.js依赖并使用它.

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

然后在我们中HTML,我们可以参考使用RequireJS.

<script src=“app/require.js” data-main=“main.js” ></script>

阅读更多关于CommonJS并AMD轻松理解的内容. CommonJS,AMD和RequireJS之间的关系？

• Browserify:开始允许CommonJS在浏览器中使用格式化模块.因此,Browserify模块捆绑器不是一个模块加载器:Browserify完全是一个构建时工具,产生一组代码,然后可以在客户端加载.

从安装了node&npm的构建计算机开始,获取包:

npm install -g –save-dev browserify

以CommonJS格式编写模块

//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));

当快乐时,发出捆绑命令:

browserify entry-point.js -o bundle-name.js

Browserify以递归方式查找入口点的所有依赖项,并将它们组合到一个文件中:

<script src=”bundle-name.js”></script>

• Webpack:它将所有静态资产(包括JavaScript图像,CSS等)捆绑到一个文件中.它还使您能够通过不同类型的加载器处理文件.您可以编写JavaScriptwith CommonJS或AMD模块语法.它以一种从根本上更加综合和自以为是的方式攻击构建问题.在Browserify你使用Gulp/Grunt和一长串的变换和插件来完成工作.Webpack提供足够的电源,您通常不需要Grunt或根本不需要Gulp.

基本用法不仅仅是简单的.像Browserify一样安装Webpack:

npm install -g –save-dev webpack

并将命令传递给入口点和输出文件:

webpack ./entry-point.js bundle-name.js

• SystemJS:是一个模块加载器,可以在运行时以今天使用的任何流行格式导入模块(CommonJS, UMD, AMD, ES6).它建立在ES6模块加载器polyfill 之上,并且足够智能以检测正在使用的格式并适当地处理它.SystemJS也可以transpile ES6代码(有Babel或Traceur)或其他语言,如TypeScript和CoffeeScript使用插件.

想知道什么是它node module以及为什么它不适合浏览器.

更有用的文章:

• https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.c1q7ao3h4
• http://jamesknelson.com/which-build-system-should-i-use-for-my-javascript-app/
• https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/

为什么jspm和SystemJS？

其中一个主要目标,ES6模块化是使其真正简单的安装和互联网(上使用任何JavaScript库从任何地方Github,npm等).只需要两件事:

• 用于安装库的单个命令
• 一行代码导入库并使用它

所以jspm,你可以做到.

1. 使用命令安装库: jspm install jquery
2. 使用单行代码导入库,无需在HTML文件内部进行外部引用.

display.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");

3. 然后System.config({ ... })在导入模块之前配置这些内容.通常在运行时jspm init,会有一个config.js为此目的命名的文件.

4. 要使这些脚本运行,我们需要加载system.js并config.js在HTML页面上.之后我们将display.js使用SystemJS模块加载器加载文件.

的index.html

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import("scripts/display.js");
</script>

注意:你也可以使用npm,Webpack因为Angular 2已经应用了它.由于jspm开发是为了集成SystemJS并且它在现有npm源代码之上工作,所以您的答案取决于您.

3.任务选手

任务运行器和构建工具主要是命令行工具.为什么我们需要使用它们:一句话:自动化.在执行重复性任务(例如缩小,编译,单元测试,linting)时,您需要做的工作越少,以前需要花费很多时间才能完成命令行甚至手动操作.

• Grunt:您可以为开发环境创建自动化,以预处理代码或使用配置文件创建构建脚本,并且处理复杂任务似乎非常困难.在过去几年流行.

每个任务Grunt都是一系列不同的插件配置,只需一个接一个地以严格独立和顺序的方式执行.

grunt.initConfig({
  clean: {
    src: ['build/app.js', 'build/vendor.js']
  },

  copy: {
    files: [{
      src: 'build/app.js',
      dest: 'build/dist/app.js'
    }]
  }

  concat: {
    'build/app.js': ['build/vendors.js', 'build/app.js']
  }

  // ... other task configurations ...

});

grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);

• Gulp:自动化就像Grunt但不是配置,您可以JavaScript使用流编写,就像它是一个节点应用程序.喜欢这些天.

这是一个Gulp示例任务声明.

//import the necessary gulp plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');

//declare the task
gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

查看更多:https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri

4.脚手架工具

• Slush and Yeoman:您可以使用它们创建启动项目.例如,您计划使用HTML和SCSS构建原型,然后手动创建一些文件夹,如scss,css,img,fonts.您只需安装yeoman并运行一个简单的脚本即可.那么一切都在这里给你.

在这里找到更多.

npm install -g yo
npm install --global generator-h5bp
yo h5bp

查看更多:https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express

我的答案与问题的内容并不完全匹配,但当我在谷歌上搜索这些知识时,我总是在顶部看到这个问题,所以我决定总结一下.希望你们发现它有用.

Answer 3

好吧,他们都有一些相似之处,他们以不同和相似的方式为你做同样的事情,我将它们划分为3个主要组,如下所示:

1)模块捆绑器

webpack和browserify作为流行的,像任务运行器一样工作,但具有更大的灵活性,因为它会将所有内容捆绑在一起作为您的设置,因此您可以将结果指向bundle.js,例如在一个单独的文件中,包括CSS和Javascript,更多细节,请看下面的详细信息:

的WebPack

webpack是现代JavaScript应用程序的模块捆绑器.当webpack处理您的应用程序时,它会递归地构建一个包含应用程序所需的每个模块的依赖关系图,然后将所有这些模块打包成少量的包 - 通常只有一个 - 由浏览器加载.

它非常易于配置,但要开始使用,您只需要了解四个核心概念:入口,输出,加载器和插件.

本文档旨在对这些概念进行高级概述,同时提供详细概念特定用例的链接.

更多在这里

browserify

Browserify是一个开发工具,它允许我们编写node.js样式的模块,这些模块可以在浏览器中进行编译.就像节点一样,我们将模块编写在单独的文件中,使用module.exports和exports变量导出外部方法和属性.我们甚至可以使用require函数来要求其他模块,如果省略它将解析到node_modules目录中的模块的相对路径.

更多在这里

2)任务跑步者

gulp和grunt是任务运行者,基本上是他们所做的,创建任务并随时运行它们,例如你安装一个插件来缩小你的CSS然后每次运行它来进行缩小,更多关于每个的细节:

吞

gulp.js是Fractal Innovations和GitHub上的开源社区的开源JavaScript工具包,用作前端Web开发中的流构建系统.它是一个基于Node.js和Node Package Manager(npm)构建的任务运行器,用于自动化Web开发中涉及的耗时和重复性任务,如缩小,连接,缓存清除,单元测试,linting,优化等.gulp使用一种代码优化配置方法,用于定义其任务,并依赖于其小型,单一用途的插件来实现它们.gulp生态系统有1000多个这样的插件可供选择.

更多在这里

咕噜

Grunt是一个JavaScript任务运行器,一种用于自动执行常用任务(如缩小,编译,单元测试,linting等)的工具.它使用命令行界面来运行文件中定义的自定义任务(称为Gruntfile) .Grunt由Ben Alman创建,用Node.js编写.它通过npm分发.目前,Grunt生态系统中有超过五千个插件可供使用.

更多在这里

3)包管理员

软件包管理器,他们所做的是管理您在应用程序中需要的插件,并使用package.json通过github等为您安装,非常方便更新模块,安装它们并共享您的应用程序,更多详细信息:

NPM

npm是JavaScript编程语言的包管理器.它是JavaScript运行时环境Node.js的默认包管理器.它由命令行客户端(也称为npm)和公共包的在线数据库(称为npm注册表)组成.通过客户端访问注册表,可以通过npm网站浏览和搜索可用的包.

更多在这里

亭子

Bower可以管理包含HTML,CSS,JavaScript,字体甚至图像文件的组件.Bower不会连接或缩小代码或执行任何其他操作 - 它只是安装所需的软件包及其依赖项的正确版本.首先,Bower通过从各地获取和安装包来工作,负责打猎,查找,下载和保存您正在寻找的东西.Bower在清单文件bower.json中跟踪这些包.

更多在这里

和最新的软件包管理器不应该错过,它在实际工作环境中比较年轻和快速,而我之前大多使用的是npm,为了重新安装模块,它会对node_modules文件夹进行双重检查以检查模块是否存在,似乎安装模块花费的时间更少:

纱

Yarn是您的代码的包管理器.它允许您与世界各地的其他开发人员一起使用和共享代码.纱线可快速,安全,可靠地完成,因此您无需担心.

Yarn允许您使用其他开发人员的解决方案来解决不同的问题,从而使您更容易开发软件.如果您遇到问题,可以报告问题或回馈问题,并且在问题得到解决后,您可以使用Yarn使其保持最新状态.

代码通过称为包(有时称为模块)的东西共享.包中包含所有共享的代码以及描述包的package.json文件.

更多在这里

Answer 4

您可以在npmcompare上找到一些技术比较

比较browserify与grunt与gulp对比webpack

正如您所看到的,webpack得到了很好的维护,平均每4天推出一个新版本.但Gulp似乎拥有最大的社区(在Github上有超过20K的明星)Grunt似乎有点被忽视(与其他人相比)

因此,如果需要选择一个而不是另一个,我会选择Gulp

Answer 5

关于npm的一个小注释:npm3尝试以平面方式安装依赖项

https://docs.npmjs.com/how-npm-works/npm3#npm-v3-dependency-resolution

Answer 6

纱线是最近的包装经理,可能值得一提.那么,那里:https://yarnpkg.com/

Afaik,它可以获取npm和bower依赖关系,并具有其他赞赏的功能.

Answer 7

什么是webpack&webpack-dev-server？官方文档说它是一个模块捆绑器,但对我来说它只是一个任务运行器.有什么不同？

webpack-dev-server是一个实时重新加载的Web服务器,Webpack开发人员使用它来获得他们所做的即时反馈.它应该只在开发期间使用.

该项目深受nof5单元测试工具的启发.

的WebPack顾名思义将创建一个单 包的年龄网页.软件包将被最小化,并合并为一个文件(我们仍然生活在HTTP 1.1时代).Webpack具有组合资源(JavaScript,CSS,图像)并将它们注入的神奇功能:<script src="assets/bundle.js"></script>.

它也可以称为模块捆绑器,因为它必须了解模块依赖关系,以及如何获取依赖关系并将它们捆绑在一起.

你会在哪里使用browserify？我们不能对node/ES6导入做同样的事情吗？

您可以在使用Webpack的完全相同的任务上使用Browserify.- Webpack更紧凑.

需要注意的是ES6模块加载功能在Webpack2使用System.import,这不是一个单一的浏览器原生支持.

什么时候你会在npm +插件上使用gulp/grunt？

你可以忘记 Gulp,Grunt,Brokoli,Brunch和Bower.直接使用npm命令行脚本,你可以在这里为Gulp消除这些额外的包:

var gulp        = require('gulp'),
  minifyCSS     = require('gulp-minify-css'),
  sass          = require('gulp-sass'),
  browserify    = require('gulp-browserify'),
  uglify        = require('gulp-uglify'),
  rename        = require('gulp-rename'),
  jshint        = require('gulp-jshint'),
  jshintStyle   = require('jshint-stylish'),
  replace       = require('gulp-replace'),
  notify        = require('gulp-notify'),

在为项目创建配置文件时,您可以使用Gulp和Grunt配置文件生成器.这样您就不需要安装Yeoman或类似工具.

Answer 8

Webpack是捆绑者.就像Browserfy它在代码库中查找模块请求(require或import)并以递归方式解析它们一样.更重要的是,您可以配置不仅Webpack解决类似JavaScript的模块,而且解决CSS,图像,HTML等所有问题.特别让我兴奋的是Webpack,您可以将编译和动态加载的模块组合在同一个应用程序中.因此,可以获得真正的性能提升,特别是在HTTP/1.x上.您是如何做到的我在这里用示例描述了http://dsheiko.com/weblog/state-of-javascript-modules-2017/ 作为Bundler的另一种选择,可以想到Rollup.js(https://rollupjs.org/) ,它在编译期间优化代码,但剥离所有找到的未使用的块.

因为AMD,而不是RequireJS一个可以使用本机ES2016 module system,但加载System.js(https://github.com/systemjs/systemjs)

此外,我想指出它npm经常被用作自动化工具,如grunt或gulp.查看https://docs.npmjs.com/misc/scripts.我个人现在使用npm脚本只避免使用其他自动化工具,尽管在过去我非常喜欢grunt.使用其他工具,您必须依赖无数的软件包插件,这些插件通常写得不好而且没有被主动维护.npm知道它的包,所以你可以通过以下名称调用任何本地安装的包:

{
  "scripts": {
    "start": "npm http-server"
  },
  "devDependencies": {
    "http-server": "^0.10.0"
  }
}

实际上,如果软件包支持CLI,您通常不需要任何插件.