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

Posted 2023-03-07

【中文标题】我应该如何使用 browserify 和 babelify 转换 ES6 node_modules？

【英文标题】：How should I transform ES6 node_modules with browserify and babelify?

【发布时间】：2017-01-12 06:44:26

【问题描述】：

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

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

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

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

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

【问题讨论】：

通常你会在发布之前编译你的代码，然后 Browserify 等不需要知道任何关于 ES6 的知识。无论如何，这是最常见的工作流程。

如果我理解正确的话，那个特定 npm 模块的作者不应该发布 ES6 代码。

Babelify 确实有一个 only option。您可以将其配置为全局转换并使用only 来限制它转换的node_modules。

谢谢，@cartant！如果你可以发布一个例子，我会接受它作为这个问题的答案。

【参考方案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\/)).*$/

【讨论】：

我也遇到了同样的错误，我必须替换这个 index.js 和 bundle.js（我在 index.html 的凉亭组件中包含了 quilljs）***.com/questions/41800618/…