发布以ES6编写的节点模块，但不提供针对最新浏览器的ES5编译版本b / c

Question

我的团队将发布针对最新浏览器的用ES6编写的节点模块。目标浏览器支持我们使用的所有ES6功能，例如async/await，import/export。因此，我相信提供转译的ES5版本没有任何意义（我们的目标受众向我们保证，他们将只使用最新的Chrome）。

但是我发现当他们使用我们的模块时，如果没有转译的ES5版本，即使他们的gulpfile已经设置

，他们也得到SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

return browserify({ ... })
  .transform(babelify.configure({
    presets: ["es2015"]
  }))
  ...

如果他们只是将我们的模块源代码包含在自己的代码中，则可以import我的模块而不会出现任何错误。这使我相信我的模块中应该有一些设置，所以我只能提供ES6版本。

顺便说一句，我已经读过How to publish a module written in ES6 to NPM? 和SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' - Wait what?

这不是我的问题，那里的答案不能解决我的客户得到的SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'。

Answer 1

我花了一整天的时间解决它，所以我想分享我的经验。

首先，是SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'抱怨的是browserify的解析器，所以我需要做的是让客户端的browserify转换我的模块，解决方案变得非常简单！

Why aren't files in node_modules being transformed?

  

可能的解决方案是添加：

     

{“ browserify”：{       “ transform”：[“ babelify”]}}到要转换的所有模块package.json的根。

因此，将"browserify": { "transform": [ "babelify" ] }添加到模块的package.json中，问题就解决了！

很容易验证，例如在模块的.babelrc中，我特别设置了"modules":false（b / c defaults to "commonjs"）

{ "presets": [[
  "env",
  {
    "modules":false,
    "debug": true
  }
]]}

然后我又得到了SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'！

PS，

我对<script type="module"说的评论/答案不止一个。当然我知道脚本具有type =“ module”，但这是错误的答案！

由于我们正在使用浏览器环境中的节点模块进行通信，因此type =“ module”无法解决从node_modules导入模块的问题