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

微信小程序里的模块代码到底用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 ' ;