Question

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

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

将browserify选项添加到受影响的node_module的package.json
配置gulp，以便browserify尝试使用babelify转换所有文件（并为不必要的文件添加ignore-option）。

第一个选项会阻止其他人克隆我的项目并立即启动并运行。是否有解决方法，可能使用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\/)).*$/

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

1 个答案: