前言
在前端开发中，我们编写代码经常会引入第三方库或自己编写的模块，这些模块的引入顺序不好控制，如果不加以整理，就会让我们的代码略显混乱。这时候我们就需要用到一个叫做 import-sorter 的 npm 包来帮助我们自动整理代码中的 import 语句的顺序。
本文将详细介绍 import-sorter 的使用方法，包括安装、配置、常用规则等，使读者在日常开发中可以更加高效地使用它。
安装
安装 import-sorter 很简单，只需要在命令行中执行以下命令：
--- ------- ---------- -------------
配置
import-sorter 提供了多种配置方式，本文介绍一种通用的配置方式。
创建自定义配置文件
首先，在项目的根目录下创建一个名为 .importsorterrc.json 的配置文件：
-
-------- -
---------- -------
------------ -------
--------- -
-------
-------
------------------
--
------ -
-------
-------
------------------
-
-
-其中，rules 是一个对象，它存储了排序的规则，每个规则都是一个数组，数组中的字符串表示排序的方式。具体规则如下：
modules：排序模块导入语句externals：排序外部模块导入语句locals：排序本地模块导入语句all：排序所有模块导入语句
排序方式包括：
path：按照导入模块的路径排序name：按照模块的名称排序side-effect：将没有导入值的模块移到最前面type：按照模块类型排序（如：css、sass 等）case-sensitive：按照字母的大小写排序case-insensitive：忽略字母大小写排序ignore：忽略排序（如：React、Vue 等框架）
这里我们以 modules 和 locals 为例对规则进行说明：
-
-------- -
---------- -------
--------- -
-------
-------
------------------
-
-
-modules 规则表示按照导入模块的路径进行排序，而 locals 规则则表示按照路径排序后，再按照字母的大小写不敏感排序，最后按照大小写不敏感的字母顺序排列。
配置 npm 脚本
在 package.json 文件中添加以下脚本：
-
---------- -
---------------- ---------------
-
-这样就可以在命令行中执行 npm run import-sorter 来执行 import-sorter，从而完成对 import 语句的排序。
常用规则
匹配模式
在配置文件中，你还可以像使用 .gitignore 一样来指定忽略某些文件或文件夹：
**/node_modules/**：忽略所有的node_modules目录src/vendor/**：忽略src/vendor目录src/**/*.{png,jpg}：忽略src目录下的所有 png 和 jpg 文件
自定义排序
如果您想使用自定义数组来排序，您可以在 locals 或 all 中使用 custom 选项。例如：
-
-------- -
--------- -
--------
--
------ -
--------
-
--
--------- -
---------
------------
---------
----------
---------
------
-
-这里的 locals 和 all 规则都包含了自定义 custom 规则。自定义规则是一个数组，数组中的字符串表示自定义排序的顺序，例如：
.store：表示所有导入路径以.store开头的模块排在前面.services：表示所有导入路径以.services开头的模块排在.store后面.utils：表示所有导入路径以.utils开头的模块排在.services后面.styles：表示所有导入路径以.styles开头的模块排在.utils后面^redux：表示导入路径包含redux的模块排在以上模块后面^../：表示导入路径包含相对路径的模块排在最后面（即:导入自己项目中的模块）。
示例代码
------ ------ - --------- - ---- --------
------ --------- ---- -------------
------ - ------- - ---- --------------
------ - ---------- - ---- -------------
------ - ---- - ---- ----------------
------ ------ ---- -------------
------ ----- ---- -----------
----- ---- ------- --------- -
------ --------- - -
--------- --------------------------
------ ---------------------------
----------- -------------------------
--
------------------- -
----- - -------- - - -----------
----- ----- - --- --------
---------------------------------------------------
-
-------- -
----- - ----- - - -----------
------ -
---- ------------------------
--------------- --
----- ------------- ----------- --
--
------
--
-
-
----- --------------- - ----- -- --
------ ------------------
----------- ----------------------
---
------ ------- -------------------------------在上面的代码中，我们可以看到 import 语句的顺序如何凌乱。如果我们在项目中执行 import-sorter 命令，它将自动按照我们在 .importsorterrc.json 文件中定义的规则整理代码。
总结
本文介绍了如何使用 import-sorter npm 包来帮助我们自动整理代码中 import 语句的顺序。在日常的开发工作中，我们需要注意代码的可读性和可维护性，而整理 import 语句的顺序正是这种意义上的一种优化。需要注意的是，正确理解并使用 import-sorter 的规则，才能让整理代码的效率有所提高。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668e9d9381d61a3540bed