介绍
在前端开发中，构建工具是必不可少的一部分。在某些特定的场景下，需要将不同的文件打包到不同的输出目录中，这时可以使用 @sewing-kit/plugin-package-flexible-outputs 这个 npm 包。它提供了一种非常灵活的方式来配置输出目录。
安装
使用 npm 进行安装：
npm install @sewing-kit/plugin-package-flexible-outputs --save-dev
配置
在使用之前，需要做一些配置工作。在 sewing-kit 的配置文件中，需要添加以下配置项：
const {createPackage} = require('@sewing-kit/config');
module.exports = createPackage((pkg) => {
pkg.use(
'@sewing-kit/plugin-package-flexible-outputs',
(options) => options,
);
});在这个例子中，我们使用了 createPackage 这个函数，创建了一个 sewing-kit 的配置文件。配置文件中使用了 @sewing-kit/plugin-package-flexible-outputs 这个插件，并将其传递了一个空的 options 对象。
options 对象中有以下配置项：
- flexibleOutputs: 让创建包时使用 @sewing-kit/plugin-package-flexible-outputs 插件。
- outputs: 定义输出的目录。
在此，我们使用 outputs 配置项来定义输出的目录：
-- -------------------- ---- -------
----- --------------- - ------------------------------
-------------- - ------------------- -- -
--------
----------------------------------------------
--------- -- --
-----------
-------- -
----- ------
-------- -------
--
---
--
---在这个例子中，我们定义了两个输出目录，一个是 Node 目录，另一个是 Browser 目录。
示例代码
-- -------------------- ---- -------
------ ------ ---- -------
------ ------------ ---- --------------------------------
------ --------------- ---- ---------------------
------ ---- ------------------ ---- --------------------
------ ------- ------------------- -- -
--------
----------------------------------------------
--------- -- --
-----------
-------- -
----- ------
-------- -------
--
---
--
--------
-------------
--------- -- -
----- --------- - --------
----- ------------ - -
--------- -----------------------------------
-------- -------------
--
------ -
-----------
--------- --------------- -----------------
----------------- -
---------------------------- -- -
----- -
----------------
------- --------------- -------------------------
-------- --------------- -------
--
---
------------------------------- -- -
-------- -
----------------
------- --------------- ----------------------------
-------- --------------- -------
------- ------
--
---
--
--
--
--
----------------- -- -
----------------
-
----- --------------------
------ -------------------------------
--
----- ------ -- -
----- --------------
------ -- ----------------------------
------ -- -------------------------------
--
--
--
---
---在这个示例代码中，我们创建了一个 sewing-kit 的配置文件，并使用了 @sewing-kit/plugin-package-flexible-outputs 插件来定义了两个输出目录，一个是 Node 目录，另一个是 Browser 目录。我们还使用了 @sewing-kit/plugin-typescript 插件来进行 TypeScript 的编译。我们在这里使用了 outputs 的 includes 属性来判断输出的目录是否存在，从而进行不同的设置。
在最后，我们使用了 sewing-kit 提供的任务系统来进行打包，同时也使用到了 flexibleOutputs 和 outputs 这两个配置项。通过这一套流程，已经可以完成将不同的文件打包到不同输出目录的操作了。
总结
在前端开发中，构建工具是很重要的一步。在某些特定的场景下，输出到不同的目录也是必须的。在这时，使用 @sewing-kit/plugin-package-flexible-outputs 这个 npm 包非常方便。在使用的过程中，需要配置 outputs 对象来描述不同的输出目录。同时，也可以使用 flexibleOutputs 配置项进行扩展。通过这篇文章的介绍，相信大家已经掌握了使用 @sewing-kit/plugin-package-flexible-outputs 的方法，并能够在实际项目中运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3cf11bdbf7be33b25670e9