使用Babel和Gulp将ES6模块转换为AMD和CommonJS

　　ECMAScript 6（又名 ECMAScript 2015 或 ES6），下一个 JavaScript 版本的规范已经获得批准，浏览器供应商正在努力实现它。与之前版本的 ECMAScript 不同，ES6 对语言进行了大量更改，使其非常适合当今使用的规模。Sitepoint 有许多文章涵盖这些功能。
　　虽然浏览器还没有实现所有的功能，但我们已经可以在开发过程中利用 ES6 并在发布应用程序之前将其转换为浏览器可以理解的版本。Babel和Traceur是用于此目的的两个主要转译器。Microsoft 的 JavaScript 类型化超集TypeScript也可以用作 ES6 转译器。
　　我在之前的一篇文章中介绍了如何使用 ES6 来编写 Angular 1.x 应用程序。在那篇文章中，我使用 Traceur 的即时转译器来运行应用程序。虽然它可以工作，但最好提前进行转译并减少在浏览器中完成的工作量。在本文中，我们将看到如何将相同的示例应用程序转换为 ES5 并将模块转换为 CommonJS 或 AMD 使用 Babel 使其在当今的浏览器上运行。尽管该示例基于 Angular，但转译技术可用于任何有效的 ES6 代码。
　　与以往一样，您可以在我们的 GitHub 存储库中找到本文随附的代码。 模块的重要性
　　任何用于编写大型应用程序的语言的关键特性之一是能够以模块的形式加载应用程序的不同部分。模块不仅可以帮助我们保持代码更干净，而且还可以减少全局范围的使用。除非其他模块显式加载它，否则任何其他模块都无法使用模块的内容。
　　模块的重要性不仅限于应用程序。即使是大型 JavaScript 库也可以利用模块系统将其对象导出为模块，并且使用这些库的应用程序可以根据需要导入这些模块。Angular 2 和Aurelia已经开始使用这个特性。
　　如果您想快速了解在 ES6 中使用模块，请阅读：了解 ES6 模块 关于示例应用程序
　　我们的示例应用程序的主题是一个虚拟书架。它由以下页面组成： 主页：显示可以标记为已读或移至存档的活动书籍列表。 添加书页：通过接受书名和作者姓名将新书添加到书架。它不允许重复的标题。 存档页面：列出所有已存档的书籍。
　　该应用程序是使用 AngularJS 1.3 和 ES6 构建的。如果您查看文件app夹中的任何文件，您将看到用于从当前模块导出对象和从其他模块导入对象的关键字export和。import现在，我们的工作是使用Babel 的 Gulp 任务将这些模块转换为现有的模块系统之一。 但我没有使用 Angular。我只想将 ES6 模块转换为 CommonJS/AMD
　　不用担心！我们为您提供保障。通过少量的调整，下面演示的配方可以用于任何涉及 ES6 模块的项目。Angular 在这里并不重要。 转换为 CommonJS
　　CommonJS 是由CommonJS 组定义的模块系统。它是一个同步模块系统，其中模块使用函数加载并使用对象的属性require导出。默认情况下，该对象应在所有模块中可用。exportsmodulemodule
　　Node.js 使用这个模块系统，因此它在module本地定义对象并使其可用于您的应用程序。由于浏览器没有定义这个对象，我们需要使用一个叫做Browserify的工具来填补这个空白。
　　在开始之前，我们还需要安装一些 npm 包。这些将使我们能够将 Babel 和 Browserify 与 Gulp 结合使用，将我们的 ES6 模块转换为一种常见的模块格式，并将应用程序打包为单个文件供浏览器使用。 gulp-babel — 将 ES6 代码转换为原生 ES5 Browserify require(＂modules＂)   -通过捆绑所有依赖项让您在浏览器中 乙烯基源流- 直接处理 Browserify 模块，避免需要 gulp-browserify 包装器 乙烯基缓冲区- 将流转换为缓冲区（对于不支持流的 gulp-uglify 是必需的） gulp - uglify — 缩小文件 del — 让您删除文件和文件夹 gulp-rename — 一个让你重命名文件的插件
　　您可以通过键入以下内容获得此批次： npm install gulp-babel browserify gulp-browserify vinyl-source-stream vinyl-buffer gulp-uglify del gulp-rename --save-dev
　　现在让我们开始在我们的gulpfile.js. 我们需要编写一个任务来获取所有 ES6 文件并将它们传递给 Babel。Babel 中默认的模块系统是 CommonJS，所以我们不需要向 babel 函数发送任何选项。 var babel = require(＂gulp-babel＂),     browserify = require(＂browserify＂),     source = require(＂vinyl-source-stream＂),     buffer = require(＂vinyl-buffer＂),     rename = require(＂gulp-rename＂),     uglify = require(＂gulp-uglify＂),     del = require(＂del＂);  gulp.task(＂clean-temp＂, function(){   return del([＂dest＂]); });  gulp.task(＂es6-commonjs＂,[＂clean-temp＂], function(){   return gulp.src([＂app/*.js＂,＂app/**/*.js＂])     .pipe(babel())     .pipe(gulp.dest(＂dest/temp＂)); });
　　希望这里没有什么太令人困惑的地方。我们正在声明一个名为的任务 es6-commonjs，它会抓取 app 目录及其任何子目录中的所有 JavaScript 文件。然后它将它们通过 Babel 管道传输，Babel 又将单个文件转换为 ES5 和 CommonJS 模块，并将转换后的文件复制到dest/temp文件夹中。该 es6-commonjs任务有一个名为 的依赖项，它将在任务运行之前clean-temp删除dest目录和其中的所有文件。es6-commonjs
　　如果你想让代码更明确并指定模块系统，你可以将 Babel 的用法修改为： .pipe(babel({   modules:＂common＂ }))
　　现在我们可以通过应用 Browserify 来从这些单独的文件中创建一个单独的捆绑文件，然后使用 uglify 包缩小输出。以下片段显示了这一点： gulp.task(＂bundle-commonjs-clean＂, function(){   return del([＂es5/commonjs＂]); });  gulp.task(＂commonjs-bundle＂,[＂bundle-commonjs-clean＂,＂es6-commonjs＂], function(){   return browserify([＂dest/temp/bootstrap.js＂]).bundle()     .pipe(source(＂app.js＂))     .pipe(buffer())     .pipe(uglify())     .pipe(rename(＂app.js＂))     .pipe(gulp.dest(＂es5/commonjs＂)); });
　　上面的任务有两个依赖：第一个是bundle-commonjs-clean删除目录的任务，es5/commonjs第二个是前面讨论过的es6-commonjs任务。一旦这些运行，任务将组合和缩小的文件app.js放在文件夹中es5/commonjs。该文件可以直接在中引用index.html，页面可以在浏览器中查看。
　　最后，我们可以添加一个任务来启动： gulp.task(＂commonjs＂, [＂commonjs-bundle＂]); 转换为 AMD
　　异步模块定义（AMD）系统，顾名思义，是一个异步模块加载系统。它允许多个依赖模块并行加载，并且在尝试加载其他模块之前不会等待一个模块完全加载。
　　Require.js是用于与 AMD 一起工作的库。RequireJS 可通过 Bower 获得： bower install requirejs --save
　　我们还需要用于 require.js 的 Gulp 插件来捆绑应用程序。为此安装gulp-requirejsnpm 包。 npm install gulp-requirejs --save-dev
　　现在我们需要编写将 ES6 代码转换为 ES5 和 AMD 的任务，然后使用 RequireJS 将其捆绑。这些任务与 CommonJS 部分中创建的任务非常相似。 var requirejs = require(＂gulp-requirejs＂);  gulp.task(＂es6-amd＂,[＂clean-temp＂], function(){     return gulp.src([＂app/*.js＂,＂app/**/*.js＂])     .pipe(babel({ modules:＂amd＂ }))     .pipe(gulp.dest(＂dest/temp＂)); });  gulp.task(＂bundle-amd-clean＂, function(){   return del([＂es5/amd＂]); });  gulp.task(＂amd-bundle＂,[＂bundle-amd-clean＂,＂es6-amd＂], function(){   return requirejs({     name: ＂bootstrap＂,     baseUrl: ＂dest/temp＂,     out: ＂app.js＂   })   .pipe(uglify())   .pipe(gulp.dest(＂es5/amd＂)); });  gulp.task(＂amd＂, [＂amd-bundle＂]);
　　要在 index.html 页面上使用最终脚本，我们需要添加对 RequireJS 的引用，即生成的脚本，然后加载bootstrap模块。bootstrap.js文件夹内的app文件引导 AngularJS 应用程序，所以我们需要加载它来启动 AngularJS 应用程序。    结论
　　模块是 JavaScript 中一个姗姗来迟的特性。它们将在 ES6 中出现，但不幸的是，它们的原生浏览器支持目前很差。但是，这并不意味着您今天不能使用它们。在本教程中，我演示了如何使用 Gulp、Babel 和各种插件将 ES6 模块转换为可以在浏览器中运行的 CommonJS 和 AMD 格式。
　　至于 ES6？ES6 自发布以来就在社区中引起了广泛关注。它已经被几个 JavaScript 库或框架使用，包括 Bootstrap 的 JavaScript 插件、Aurelia、Angular 2 和其他几个。TypeScript 还增加了对一些 ES6 特性的支持，包括模块。今天学习和使用 ES6，将减少将来转换代码所需的工作量。