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();