微信小程序里的模块代码到底用import导入还是require导入

之前写小程序导入模块有时候用import导入,有时候用require导入,好像都行得通。

之前也没仔细研究两者有什么区别。

去看小程序官方文档https://developers.weixin.qq.com/miniprogram/dev/reference/api/require.html,发现只能用require的方式引用模块。用module.exports的方式导出模块。也就是说仅支持CommonJS规范(nodejs原生支持的)。没说支持ES Module规范。

那为什么用import的方式导入,export的方式也能导出呢?

原来是开发小程序的时候用到了babel编译。会将import语法转码为require。

来验证一下吧:

1. 用export的方式导出,import的方式导入,开启babel编译。

微信小程序里的模块代码到底用import导入还是require导入_第1张图片
在这里插入图片描述
微信小程序里的模块代码到底用import导入还是require导入_第2张图片
代码正常运行

2. 用export的方式导出,import的方式导入,关闭babel编译。(按照1的方式,仅关闭babel编译)

微信小程序里的模块代码到底用import导入还是require导入_第3张图片
代码编译报错
微信小程序里的模块代码到底用import导入还是require导入_第4张图片

3. 用module.exports的方式导出,require的方式导入,开启babel编译。

在这里插入图片描述
在这里插入图片描述
微信小程序里的模块代码到底用import导入还是require导入_第5张图片
代码正常运行

4. 用module.exports的方式导出,require的方式导入,关闭babel编译。(按照3的方式,仅关闭babel编译)

微信小程序里的模块代码到底用import导入还是require导入_第6张图片
代码仍然正常运行

总结:ES Module规范只有在开启了babel编译时才能使用。

在阮一峰的文档 https://es6.ruanyifeng.com/#docs/module#import-%E5%91%BD%E4%BB%A4 里写了:
微信小程序里的模块代码到底用import导入还是require导入_第7张图片

另外参考地址:https://segmentfault.com/q/1010000015690715

你可能感兴趣的:(微信小程序,小程序,前端)