在前端开发中，我们常常需要使用 Babel 来将 ES6+ 的代码转换成 ES5 以便浏览器可以理解和执行，同时我们也需要使用 npm 来引入各类第三方包。本文就来介绍一个名为 babel-plugin-transform-auto-export 的 npm 包，它可以自动将代码转换为模块，并把模块导出的部分自动加上导出语句，帮助我们提高代码质量和开发效率。
安装和使用
安装：
npm i -D babel-plugin-transform-auto-export
使用：
在 babel 的配置文件中添加：
{
"plugins": [
"transform-auto-export"
]
}然后你就可以愉快的使用这个插件了！
深入了解
babel-plugin-transform-auto-export 可以总结为三个功能：
- 自动将文件转换为模块。
- 自动将模块导出语句加入到代码中。
- 可以通过一些配置项来进行不同的选择和调整。
自动将文件转换为模块
模块化是JavaScript中的一种非常重要的开发方式，它能将代码分割成不同的功能模块，让程序更加可读、可维护。babel-plugin-transform-auto-export 将会按照如下规则，自动将普通文件转换为 ES6 模块文件：
- 当文件以 .js 或者 .jsx 结尾时，默认为 ES6 模块。
- 当文件以 .mjs 结尾时，也认为它是 ES6 模块。
- 其他文件类型按照默认规则被视为 CommonJS 模块。
这里有几点需要注意：
- ES6 模块和 CommonJS 有着不同的导入语法，切记在之后的使用中使用适合的导入语法。
- 如果你想使用 webpack 打包模块时，请更换模块的扩展名至 .mjs 或者 .js（前者是 ES6 官方规定的模块文件扩展名，后者是 webpack 默认识别的模板文件扩展名）。
自动将模块导出语句加入到代码中
当你开发的代码中不允许使用未导入的变量时，babel-plugin-transform-auto-export 可以帮助你自然地实现变量的导出语句，让代码更加清晰。
该插件会自动添加到每个 ES6 模块文件的文件末尾：
export default <文件名>
其中，<文件名> 为当前文件名去掉扩展名的部分，也就是理解上相当于变量名，方便开发者进行引入和使用。
可以通过一些配置项来进行不同的选择和调整
除了默认规则之外，babel-plugin-transform-auto-export 还可以通过以下配置进行调整：
options.localCriteria
这个值用于确定一个变量是否应该被自动导出。默认情况下，所有不带下划线和 $ 符号的变量都会被自动导出。如果你想自己定义导出的变量，可以在 babel 配置文件中进行如下修改：
-- -------------------- ---- -------
-
---------- -
------------------------- -
---------------- -
---------- ----------------
-
--
-
-这个配置会自动导出所有以 myPrefix 开头的变量。
options.test
这个值用于配置需要自动添加导出语句的文件名称的正则表达式，可以更灵活地控制自动导出的情况。默认情况下，所有 ES6 模块文件都会被自动添加导出语句。如果你想自己定义需要添加导出语句的文件类型，可以在 babel 配置文件中进行如下修改：
{
"plugins": [
["transform-auto-export", {
"test": "/\\.(jsx?|mjs)$/i"
}]
]
}这个配置会自动添加 ES6 模块文件和 .mjs 文件的导出语句。
示例代码
下面是一段使用 babel-plugin-transform-auto-export 转换后的代码示例，可以帮助你更好地理解它的作用：
转换前：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ ------- ----- ---- ------- --------- -
----- - -
------ -
-
----------- - -- -- -
----------------------- -- --
------ --------------- - -
---
-
-------- -
----- - ----- - - ----------
------ -
-----
-------------
--------- -----------
------- ----------------------------------- --------------
------
-
-
-转换后：
-- -------------------- ---- -------
-- ---------
------ ------- ----
------ - --------- - ---- -------
----- ---- ------- --------- -
----- - -
------ -
-
----------- - -- -- -
----------------------- -- --
------ --------------- - -
---
-
-------- -
----- - ----- - - ----------
------ -
-----
-------------
--------- -----------
------- ----------------------------------- --------------
------
-
-
-
-- ------------
-- ------ ---- ---- --------可以在转换前后对比，发现插件帮助我们自动将 Test 这个组件导出了，并且在导入的时候我们可以直接使用默认导入语法进行导入：
import Test from './Test'
总结
babel-plugin-transform-auto-export 帮助我们自动生成导出语句，让代码更具可读性和维护性；同时还可以通过一些配置项，来更加灵活地调整插件的行为。它是一款十分实用的插件，也是前端开发的好帮手，推荐大家在实际开发中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563d481e8991b448e12d3