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