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

Question

我正在使用 gulp、browserify 和 babelify 以便在我的项目中使用 ES6 语法。当我导入一个也是用 ES6 编写的 node_module 时，gulp 会抛出错误：'import' and 'export' may appear only with 'sourceType: module'

我在babelify's github page 上阅读了建议的解决方案。简而言之，有两种可能：

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

第一个选项会阻止其他人克隆我的项目并立即启动并运行它。是否有解决方法，可能使用 npm 后安装脚本？

第二个选项似乎有点矫枉过正。有没有更优雅的解决方案？

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\/)).*$/