ES6（ECMAScript 2015）是 JavaScript 最新的一种语言规范，它增加了很多新的语法特性，让 JavaScript 更加的强大和灵活。然而，ES6 并不是所有浏览器都支持，为了让 ES6 代码能够在所有浏览器上正常运行，我们需要使用 Babel 进行转码。
Babel 可以将 ES6 代码转换为 ES5 代码，但我们发现，在使用 Babel 编译 ES6 模块时，有时 export default 会被忽略掉，导致编译后的代码不能正常工作。这个问题可能会让我们很困惑，今天我们就来详细探讨一下这个问题。
问题的根源
我们先来看一下这个问题出现的根源。在 ES6 模块中，我们可以使用 export default 暴露一个默认的值，比如：
export default 'Hello World!';
这个 export default 暴露出去的值可以是任何类型的值，比如一个函数或者一个对象等等。
在 Babel 编译 ES6 模块时，我们通常使用 babel-loader 和 babel-preset-env 来实现。babel-preset-env 是一个预设（preset），它可以根据我们的环境自动调整编译后的代码，将其转换为最适合当前环境的代码。
默认情况下，babel-preset-env 会将 ES6 模块转换为 CommonJS 模块（也就是 Node.js 的模块系统），这是因为 CommonJS 是目前 Node.js 中最常用的模块系统。所以，我们的代码经过 Babel 编译后，会变成这个样子：
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _default = 'Hello World!';
exports.default = _default;这里，我们定义了一个 "default" 的属性来存储我们的值，并且使用 Object.defineProperty 方法将其设置为只读属性。此外，我们还使用了 "__esModule" 这个特殊的属性，这个属性告诉 Node.js 解释器这个模块是 ES6 模块，而不是 CommonJS 模块。
问题的解决
我们知道，Node.js 的模块系统是基于 CommonJS 的，而 CommonJS 并不支持 "default" 属性（或者说只读属性），所以在使用 CommonJS 模块时，“default” 属性会被忽略掉，这就是我们通常会遇到的问题。
为了解决这个问题，我们可以使用 CommonJS 的 module.exports 替代 ES6 的 export default。例如，我们可以这样写：
module.exports = 'Hello World!';
这段代码可以正常工作，并且能够被 Node.js 解释器正确地解析为字符串 "Hello World!"。
同样地，在使用 Babel 编译 ES6 模块时，我们可以使用 babel-plugin-add-module-exports 插件，自动将 export default 转换为 module.exports。这个插件就是为了解决这个问题而生的。
使用方法如下：
首先，安装插件：
npm install babel-plugin-add-module-exports --save-dev
然后，在 babel-loader 的配置文件中添加插件：
-- -------------------- ---- -------
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ----------------------
-------- ----------------------
-
-
-这样，我们就解决了这个问题。
总结
通过本文的讲解，我们了解了 ES6 模块中 export default 的用法，以及在使用 Babel 编译 ES6 模块时遇到的问题和解决方案。虽然这个问题看起来很小，但它背后涉及到了模块化，编译器等多个方面的知识，对于前端开发者来说还是很有启发性和指导意义的。
最后，我们需要注意的是，在选择模块系统时，应该考虑到项目的实际需求和使用环境，选择能够最好适应项目和环境的模块系统。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64964fc448841e9894352d41