javascript - CommonJS对应的ES2015写法是什么？

问题描述

问 题

使用CommonJS形式的话可以直接导出一个模块：

module.exports = {};

如果使用rollup的话等同于如下：

export default {};

它会转换为如下代码

'use strict';

var main = {};

module.exports = main;

但是babel会转化为：

"use strict";

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

exports.default = {};

export default导出的对象变成了模块的一个default属性，而不是整个模块。
那么如果使用babel编译的话，要使得export default导出的是整个模块该怎么做？

解决方案

在 babel 5 时代， export default {}; 除了会被转译成 exports.default = {};，还会加一句 module.exports = exports.default，这样就是楼主想要的整个模块，但在 babel6 时代做了一个区分，后面这句不再添加。这是为什么呢？在我看来，主要是为了区分 commonJS 和 es6 的模块定义，也就是 commonJS的 require 和 module.exports 搭配使用，而 import 则是和 export 搭配使用，因为在 babel 中，虽然是输出到 exports.default上，但 import 也会对应的默认去拿 default 下的模块，相当于 require(xxx)['default']。如果楼主非想要回到 babel5 时候的表现的话，babel6 有一个 plugin 可以做到。https://www.npmjs.com/package/babel-plugin-add-module-exports

这篇关于javascript - CommonJS对应的ES2015写法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！