开发环境

• IDE：vscode
• 开发平台：微信开发者工具
• 框架：WePY
• UI组件库：Vant Weapp

坑の3：引用“Toast 轻提示”（马里亚纳巨坑*1）

解决方法请移步：#解决方法

当你谨遵文档的指引时，控制台给你开了个天大的玩笑。

谪·炬华·施渥硕德

问题描述：

按文档指示进行引入时，控制台会报如上错误

问题分析：

根据控制台报错，定位到 weapp/vendor.js 文件的 4903 行，报错原因是：import 和 export 只可出现在top level。

通过在vendor.js文件搜索“export”得知，报错原因并没卵用，因为实在不知道“top level”是如何定义的。

但是可以发现vendor.js是以：

/***** module X start *****/
...
/***** module X end *****/

的形式由多个 module 组成。

此外，在其他没报错的module中，export都是以：

module.exports = xxx;           // 形式一
exports.xxx = xxx;              // 形式二

如上两种形式出现在各 module 的末尾。

于是可以大胆推测，应：

将此报错module的来源，即 node_modules/@vant/weapp/dist/common/validator.js 文件中的所有：

export function xxx() {
    ...
}

改为：

function xxx1() {
    ...
}
function xxx2() {
    ...
}
...
// 文件末尾：
exports.xxx1 = xxx1;
exports.xxx2 = xxx2;
...

然而，控制台这位大爷再一次用同样的报错给予了我一记巴掌：

只不过可喜可贺的是报错变成了4947行，于是我一气之下把 validator.js 文件中的 isObj 方法直接拷贝进 toast.js 中，然后删掉import一行，顺带将末尾的 export default Toast; 改为 module.exports = Toast; 于是：

解决方法：

/***** path/to/@vant/weapp/dist/toast/toast.js *****/
- import { isObj } from '../common/validator';
+ function isObj(x) {
+     const type = typeof x;
+     return x !== null && (type === 'object' || type === 'function');
+ }
...
- export default Toast;
+ module.exports = Toast;

后记

Q：为什么是“马里亚纳”级？

A：你尝试过想破脑袋搜关键词，一个个点进百度搜到的链接，再无可奈何地去啃那不知所云的控制台报错吗？

---

本作品采用知识共享署名 4.0 国际许可协议进行许可。
This work is licensed under a Creative Commons Attribution 4.0 International License.

CTB日志：https://www.chinathinksbig.com/team/blog/1474788284304117760

---