微信小程序里的模块代码到底用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编译。
/ / module.exports = { addAddressList, getAddressList };
export { addAddressList,getAddressList };
pages > myAddress > addressList > addressList.js > ...
import { getAddressList } from "../../ ../utils/manageAddress";
以下两项都被选中时,代码正常运行
将JS编译成ES5
使用npm模块
2、用export的方式导出,import的方式导入,关闭babel编译。(按照1的方式,仅关闭babel编译)
只选中:使用npm模块
代码编译报错
3、用module.exports的方式导出,require的方式导入,开启babel编译。
module.exports = { addAddressList,getAddressList };
//export { addAddressList, getAddressList };
//import { getAddressList } from "../ ../ ../utils/manageAddress" ;
const { getAddressList } = require("../../../utils/manageAddress");
将JS编译成 ES5 和 使用npm模块 都选中的话,代码正常运行
4、用module.exports的方式导出,require的方式导入,关闭babel编译。(按照3的方式,仅关闭babel编译)
只选中 使用npm模块,不选中将js编译成es5,代码正常运行。
总结:ES Module规范只有在开启了babel编译时才能使用。
目前阶段,通过 Babel转码,CommonJS模块的require命令和ES6模块的import命令,可以写在同一个模块里面,但是最好不要这样做。因为import在静态解析阶段执行,所以它是一个模块之中最早执行的。下面的代码可能不会得到预期结果。
Q回
require ( 'core-js /modules/es6.symbol ' ) ;
require ( 'core-js/modules/es6.promise ' ) ;
import React from 'React ' ;