我应该如何使用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. 在受影响的node_module的package.json中添加一个browserify选项
2. 配置gulp，以便browserify尝试使用babelify转换所有文件（并为不必要的文件添加忽略选项）。

第一种选择将阻止其他人克隆我的项目并使它立即启动并运行。有没有解决方法，也许使用npm postinstall脚本？

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

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