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

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

我已经阅读了babelify的github页面上提出的解决scheme。 总之，这两种可能性是：

  1. 将browserify选项添加到受影响的node_module的package.json
  2. configurationgulp，以便browserify试图用babelify转换所有文件（并为不必要的文件添加一个忽略选项）。

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

第二个选项似乎是一个矫枉过正。 有没有更优雅的解决scheme呢？

Babelify有一个onlyselect，可以用来避免转译与正则expression式不匹配的文件。 与Browserify的global选项（默认情况下，转换不应用于node_modules目录中的文件）结合使用时，可以select性地在node_modules内node_modules文件。

有了这个示例configuration： 

 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下只有一个目录需要进行转换，则可以将正则expression式简化为： 

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

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

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