npm 包 @babel/plugin-proposal-export-default-from 使用教程

在前端开发中，经常需要进行模块化开发，这就需要使用到模块的导入和导出，其中 ES6 中的 export 以及 import 是现在主流的模块化方式。但是在使用 export 时，如果要默认导出一个变量或函数，需要使用 export default，而在导入时使用 import 对象的情况下，需要从对象中使用 .default 属性来获取默认导出的内容，这样使用起来比较麻烦。

为了解决这个问题，就有了 @babel/plugin-proposal-export-default-from 这个 npm 包，它的作用是支持使用 export default from 语法，以让导入的代码更加简单明了。本文将详细介绍如何使用它。

安装

可以使用 npm 进行安装：

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-export-default-from

要使用 @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 插件：

{
  "plugins": [
    "@babel/plugin-proposal-export-default-from"
  ],
  "presets": [
    "@babel/preset-env"
  ]
}

如上所示，在 babelrc 中加入该插件。

在这里，我们同样添加了 @babel/preset-env，它是一个帮助我们将 ES6+ 语法转化成 ES5 语法的预设。

使用示例

现在我们已经可以使用 export default 来导出默认模块，让代码更加简单明了了。下面是一个示例：

// 引入模块
import myModule from 'my-module';

// 导出模块（myModule 中的默认模块）
export default myModule;

注意，该插件仅仅支持 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