我需要哪些工具才能使用 Gulp 为我的项目使用 ES6 样式导入？

Question

我有一个遗留项目，它使用 Gulp 来编译 SASS 和缩小 JS 等（基于 Drupal）。

我想使用 ES6 样式导入并且还能够导入位于 node_modules 中的模块而不引用完整路径（例如将 lodash.debounce 模块导入为

  import throttle from 'lodash.throttle'

我需要做什么才能实现？（除了 Gulp 和 NPM）。通天塔？浏览器化？失去了所有的工具。

我想避免使用 webpack，因为它会增加我项目的复杂性（而且我不知道我是否可以将它与 Drupal 7 的处理方式并行使用）

Answer 1

是的，你想要 babel。在你的 gulpfile 中设置它的文档在这里：http://babeljs.io/docs/setup/#installation

您需要使用 es2015 预设来启用导入语法。

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
  return gulp.src("src/app.js")
    .pipe(babel({
        presets: ['es2015']
     }))
    .pipe(gulp.dest("dist"));
});

Answer 2

要使用 import 你需要一个转译器，例如 babel。假设您正在为浏览器构建代码然后使用 import（转换为 require）您需要 webpack 或 browserify 这也将允许您从 node_modules 导入（也有其他模块构建器） , jspm and systemjs, 但我对它们几乎一无所知)。对于其中任何一个，您还需要一些东西来使 babel 能够在构建过程中使用。我用 webpack with babel-loader.

我找到了一个有用的参考资料 here，专门介绍如何将 ES6 模块与 webpack 结合使用。

我需要哪些工具才能使用 Gulp 为我的项目使用 ES6 样式导入？

Which tools do I need in order to use ES6 style imports for my project using Gulp?

javascript

node.js

ecmascript-6

babeljs

es6-module-loader