我该如何使用browserify和babelify转换ES6的node_modules？

Question

我正在使用gulp、browserify和babelify来在项目中使用ES6语法。但一旦我导入了一个同样使用ES6编写的node_module，gulp就会抛出一个错误：'import' and 'export' may appear only with 'sourceType: module'

我已经在babelify的github页面上阅读了提出的解决方案。简而言之，有两种可能性：

1. 将一个browserify选项添加到受影响的node_module的package.json中。
2. 配置gulp，使browserify尝试使用babelify转换所有文件（并为不必要的文件添加忽略选项）。

第一种选择将防止其他人能够克隆我的项目并立即运行它。也许有一种解决方法，可以使用npm postinstall脚本吗？

第二个选项似乎过于复杂。是否有更优雅的解决方案？

- pwagner

---

通常在发布代码之前，您需要编译它，然后Browserify等工具就不需要了解ES6的任何内容。这是最常见的工作流程。 - loganfsmyth

所以如果我理解正确的话，那个特定的npm模块的作者不应该发布ES6代码。 - pwagner

Babelify确实有一个only选项。您可以将其配置为全局转换，并使用only来限制它转换的node_modules。 - cartant

谢谢，@cartant！如果您能发布一个例子，我会把它作为回答这个问题的答案。 - pwagner

Answer 1

Babelify有一个only选项，可以用于避免转译不符合正则表达式的文件。当与Browserify的global选项结合使用时（默认情况下，变换不应用于node_modules目录内的文件），您可以有选择地转译node_modules内的文件。

使用此示例配置：

browserify({ entries: ["index.js"] })
  .transform("babelify", {
    global: true,
    only: /^(?:.*\/node_modules\/(?:a|b)\/|(?!.*\/node_modules\/)).*$/,
    presets: ["es2015"]
  })
  .bundle()
  .pipe(fs.createWriteStream("bundle.js"));

如果文件不在node_modules目录下，除非它们位于以下目录之一，否则不会被编译：

• /node_modules/a
• /node_modules/b

如果你只想转译node_modules目录下的一个子目录，你可以简化正则表达式为：

/^(?:.*\/node_modules\/a\/|(?!.*\/node_modules\/)).*$/

如果您有更多，可以添加它们：

/^(?:.*\/node_modules\/(?:a|b|c|d)\/|(?!.*\/node_modules\/)).*$/

- cartant

---

我也遇到了同样的错误，我需要用什么来替换这个index.js和bundle.js（我在index.html中包含了quilljs作为我的bower组件）。 http://stackoverflow.com/questions/41800618/bower-component-quilljs-editor-module-es6-is-failing-while-running-gulp-build - Mr X