remaxjs/remax

commonjs 模块使用 async 语法错误

Opened this issue · 2 comments

问题描述
我照着文档中的快速入门新创建了一个项目,然后尝试导入一个第三方npm包(umd打包方式)试用一下,结果构建的时候就报这个错误:
export 'Core' was not found in '../../../lib/demo
经仔细检查,发现好像是这个包里面包含了一个async方法。我手动找到这个async方法注释到就能构建成功了,
因为这个包比较大,不好展示,所以我创建了一个最简单的umd包,导出几个对象,然后在某个地方写一个async方法,尝试一下引用这个包,结果也出现了同样的构建错误。

我创建了一个仓库,用来重现这个错误,仓库地址:https://github.com/fenyiwudian/demo-app

这个仓库就是按快速入门文档创建的。

克隆下这个仓库后,安装依赖,然后启动项目

git clone git@github.com:fenyiwudian/demo-app.git
yarn 
yarn dev wechat

就会出现构建错误,

然后找到lib/demo.js这个包,到最后几行,有一个注释,把注释下面的async方法注释掉,则能成功构建。

我现在的疑问是:

  1. 为什么async方法会导致这个构建错误,我之前在普通的react项目中同样也是用webpack构建的同样的依赖包则没有出现这个错误。
  2. 我该如何解决这个问题

这个我第一想到的就是用babel把依赖包中的async处理成Promise,但是我不懂出错的本质诱因,所以可能其他原因也会导致这个错误。这不是根本的解决办法。

示例代码
如上

其他信息

原因是 async 语法会被 babel 转换成 regenerator-runtime 处理。

remax 会自动对 global 变量 regeneratorRuntime 添加

import regeneratorRuntime from 'regenerator-runtime'

这样 umd 的导出就失效了

可以直接用 webpack.ProvidePlugin 注入 regenerator-runtime,但是发现使用 ProvidePlugin 后跟 react devtools 有冲突,需要研究一下。