在 ES6 中，我们经常使用 export default 这种默认导出语法来导出模块，但是在 Babel 编译时，有时会出现以下错误：
SyntaxError: Unexpected token (file:src/Main.js)
这是因为 Babel 默认不支持默认导出语法，需要进行特定的配置才能让 Babel 编译 ES6 中的默认导出语法。本文将介绍如何解决这个问题，帮助大家更好地利用 ES6 的默认导出语法。
解决方法
要解决 Babel 编译 ES6 中的默认导出语法的问题，需要进行以下步骤：
安装
@babel/plugin-proposal-export-default-from插件。npm install --save-dev @babel/plugin-proposal-export-default-from
在
.babelrc中配置插件。在
plugins中添加@babel/plugin-proposal-export-default-from插件即可。{ "presets": [ "@babel/preset-env" ], "plugins": [ "@babel/plugin-proposal-export-default-from" ] }
这样，Babel 就可以编译 ES6 中的默认导出语法了。
示例代码
下面是一个示例代码，展示了如何使用 ES6 中的默认导出语法，并且正确编译为 ES5 的等效代码。
ES6 代码
// MathUtils.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
export default {
add,
subtract,
};// Main.js import mathUtils from './MathUtils'; console.log(mathUtils.add(1, 2)); console.log(mathUtils.subtract(5, 3));
编译后的 ES5 代码
-- -------------------- ---- ------- -- ------------ ---- -------- ------------------------------ ------------- - ------ ---- --- --------------- - ---- -- --- --- - -------- ------ -- - ------ - - -- -- --- -------- - -------- ----------- -- - ------ - - -- -- --- -------- - - ---- ---- --------- -------- -- --------------- - ---------
-- -------------------- ---- ------- -- ------- ---- -------- --- ---------- - ----------------------------------------------- -------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- - ------------------------------------- ---- ------------------------------------------ ----
结论
在 Babel 编译 ES6 中的默认导出语法时，需要进行特定的插件配置。本文介绍了如何安装和配置 @babel/plugin-proposal-export-default-from 插件来解决这个问题。通过本文的学习，读者将能够更好地利用 ES6 的默认导出语法，并且能够正确编译为 ES5 等效代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670dd11a5f551281025e7f62