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

Question

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

我已阅读 babelify's github page 上提出的解决方案。简而言之，两种可能性是：

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

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

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

Answer 1

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

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

How should I transform ES6 node_modules with browserify and babelify?

node.js

npm

browserify

ecmascript-6

gulp