npm 包 @souls/barrelsby 使用教程

随着前端技术的日新月异，我们的项目已经从最初的几个 JavaScript 文件增长到了数百个，甚至数千个。如何有效地维护这些文件，避免文件之间的相互依赖和冲突，成为了我们不得不面对的重要问题。在此情况下，Barrelsby 应运而生，它是一个可以帮助我们管理文件依赖的 npm 包。

安装

在使用 @souls/barrelsby 之前，首先需要全局安装 Barrelsby：

npm install -g barrelsby

然后在项目中安装 @souls/barrelsby，通过执行以下命令：

npm install @souls/barrelsby --save-dev

配置

在项目的根目录下创建一个名为 .barrelsby.js 的配置文件。

-- -------------------- ---- -------
-------------- - -
  -------- --------
  ------- ------------
  --------- -
    ----------
    ------------
    -----------
  --
--

rootDir（必填）

指定项目的根目录，所有文件路径都从该目录开始计算。

outDir（必填）

指定生成的 barrels 文件的输出目录。

patterns

指定需要生成 barrels 文件的文件类型或者目录，可以使用 glob 语法。

indexHandler

可以自定义生成 barrels 文件的处理函数，如果没有自定义该函数，则使用默认的函数处理。

-- -------------------- ---- -------
-------------- - -
  -------- --------
  ------- ------------
  --------- -
    ----------
    ------------
    -----------
  --
  ------------- ----- ---------- -- -
    -- ---- ------ ------- --------
  --
--

使用

执行以下命令生成 barrels 文件：

barrelsby

生成的 barrels 文件会被放置在 .barrelsby.js 中 outDir 指定的目录中。

在你的代码中使用 barrels 文件：

// index.js
import { foo } from './barrels/foo';
import { bar } from './barrels/bar';

console.log(foo + bar);

这不仅能够避免了文件相互依赖带来的问题，同时也让我们的代码更加易读和易维护。

示例代码

以一个 React 项目为例，假设我们的项目结构如下：

-- -------------------- ---- -------
-----
  ------------
    --------
      ----------
      -------------
    -------
      ----------
      ------------
  -------
    --------
  -------
    ------
      ----------
  ----------

在这个项目中，我们需要生成的 barrels 文件有：

• components/index.js
• utils/index.js
• views/Home/index.js

我们的 .barrelsby.js 配置文件应该是这样的：

module.exports = {
  rootDir: './src',
  outDir: './barrels',
  patterns: ['**/*.js', '**/*.scss'],
};

执行 barrelsby 命令之后，生成的 barrels 文件如下：

|-barrels
  |-components
    |-index.js
  |-utils
    |-index.js
  |-views
    |-Home
      |-index.js

components/index.js 文件内容如下：

import { default as Button } from './Button';
import { default as Input } from './Input';

export { Button, Input };

views/Home/index.js 文件内容如下：

export { default } from './Home';

utils/index.js 文件内容如下：

export * from './api';

最后，在代码中应该这样使用 barrels 文件：

import { Button } from './barrels/components';
import { api } from './barrels/utils';
import Home from './barrels/views/Home';

console.log(api()); // call to api.js

通过上述操作，我们成功使用了 @souls/barrelsby 管理项目中的文件依赖关系，让我们的代码更加易读易维护。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006725b3660cf7123b363bc