babel 对 ECMAModule的转换

导出 export 和 export default

首先会在 exports 对象上定义 __esModule 属性，标志这是使用 ESModule 的导出。

Object.defineProperty(exports, "__esModule", { value: true });

如果是使用 export 导出，那么会将属性挂在 exports.xxx 上，如果使用的是 export default 上，那么会将属性挂在 exports.default 上。

对于 commonjs 由于是直接在 exports 对象上进行操作，如 module.exports = {}、exports.xxx = xxx，所以不需要 babel 做额外处理。

所以 commonjs 和 export 都把值挂在 module.exports 上，在导入的时候无区别，而 export default 会把值挂在 module.exports.default 上，在导入的时候会去 default 上取值

导入 import

对于导入来说，既可以导入 commonjs 也可以导入 ESModule。

使用非默认导入时，对于使用 commonjs 的导出方式和 export 的导出方式时。如下:

import { clone } from 'lodash' clone({}) 等于下面这段代码 const _lodash = require('lodash'); _lodash.clone({})

如果使用默认导入，对于使用 commonjs 的导出方式和使用 export default 的导出方式。默认导入会被转换如下：

import lodash from 'lodash' lodash.clone() 或被转换成如下代码 var _lodash = _interopRequireDefault(require("lodash")); function _interopRequireDefault(obj) { // 如果是 esmodule 的默认导出，那么 obj 中有在导出时就会把相信的值挂在 default 上，如果是 commonjs 的导出，那么它内部是没有 default 的，需要将其构造成该种数据结构 return obj && obj.__esModule ? obj : { default: obj }; } _lodash.default.clone();