在前端开发中，经常需要进行模块化开发，这就需要使用到模块的导入和导出，其中 ES6 中的 export 以及 import 是现在主流的模块化方式。但是在使用 export 时，如果要默认导出一个变量或函数，需要使用 export default，而在导入时使用 import 对象的情况下，需要从对象中使用 .default 属性来获取默认导出的内容，这样使用起来比较麻烦。
为了解决这个问题，就有了 @babel/plugin-proposal-export-default-from 这个 npm 包，它的作用是支持使用 export default from 语法，以让导入的代码更加简单明了。本文将详细介绍如何使用它。
安装
可以使用 npm 进行安装：
--- ------- ---------- ----------- ---------- ----------------- ------------------------------------------
要使用 @babel/plugin-proposal-export-default-from，还需要 Babel 进行转换。所以除了安装@babel/plugin-proposal-export-default-from 之外，还需要安装 Babel 和相应的插件。上述代码安装了 Babel 的核心库 @babel/core、命令行工具 @babel/cli、ES6 转换成 ES5 的预设 @babel/preset-env，以及我们主要介绍的 @babel/plugin-proposal-export-default-from。
配置
安装完成后，需要在项目中的 babel 配置文件 babelrc 中添加 @babel/plugin-proposal-export-default-from 插件：
-
---------- -
--------------------------------------------
--
---------- -
-------------------
-
-如上所示，在 babelrc 中加入该插件。
在这里，我们同样添加了 @babel/preset-env，它是一个帮助我们将 ES6+ 语法转化成 ES5 语法的预设。
使用示例
现在我们已经可以使用 export default 来导出默认模块，让代码更加简单明了了。下面是一个示例：
-- ---- ------ -------- ---- ------------ -- ------------- ------- ------ ------- ---------
注意，该插件仅仅支持 export default from 语法，而不支持其他导入语法，比如 import { foo } from 'my-module';。
小结
@babel/plugin-proposal-export-default-from 这个 npm 包可以让我们使用 export default from 语法，以让默认导出的代码简单明了一些。我们需要先安装这个 npm 包，然后在 babel 配置文件中添加该插件。最后，使用 export default from 语法即可快速导出模块。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/97359