简介
@sage-cli/plugin-preset-none 是一个 Sage CLI 插件预设，用于构建项目时不引入任何预设配置。该插件的主要作用是为了帮助开发人员自定义配置构建流程，以满足项目的特定需求。
安装
安装插件只需使用 npm 命令即可：
npm install -D @sage-cli/plugin-preset-none
使用
安装完成后，可以在 Sage CLI 的构建配置文件中使用该插件。以下是一个简单的配置示例，该示例演示如何使用 @sage-cli/plugin-preset-none 配置构建流程：
-- -------------------- ---- -------
-- --------------
-------------- - -
-------- -
-------------------------------- ----
--
-------- ---
--------------- -
------------ -
------ -----------------
--
----------- -
------ -----------------
--
--
--在上述配置文件中，presets 数组中包含 @sage-cli/plugin-preset-none 插件，该插件不需要传递任何参数。plugins 则为空数组。接下来，我们在不同环境下配置 Sage CLI 的构建流程。值得注意的是，在该示例中，development 和 production 环境均使用同一份配置。
深入了解
@sage-cli/plugin-preset-none 插件的主要作用就是不引入任何预设配置，而是将控制权交给开发人员。下面提供一些示例，展示该插件如何帮助我们自定义配置 Sage CLI 的构建流程。
自定义 Webpack 配置
Sage CLI 使用 webpack 来构建项目，默认情况下，Sage CLI 在 webpack 配置文件中追加一些默认的配置项。使用 @sage-cli/plugin-preset-none 插件，我们可以获得完全自定义 webpack 配置的能力。例如，以下代码演示如何使用自定义的 webpack 配置来构建项目：
-- -------------------- ---- -------
-- --------------
----- ---- - ----------------
----- ------------- - -------------------------------
-------------- - -
-------- -
-------------------------------- ----
--
-------- ---
--------------- -
------------ -
-------------- ---------------
----- --------------
------ -----------------
------- -
----- ----------------------- ----------
--------- ------------
--
---
--
----------- -
-------------- ---------------
----- -------------
------ -----------------
------- -
----- ----------------------- ----------
--------- ------------
--
---
--
--
--在上述代码中，我们通过自定义 webpackConfig 字段来指定项目的自定义 webpack 配置。webpackConfig 字段可以是一个函数，该函数返回一个完整的 webpack 配置对象，供 Sage CLI 使用。该函数可以根据需要接收参数。
自定义 babel 配置
Sage CLI 使用 babel 来处理项目中的 JavaScript 代码，默认情况下，Sage CLI 在 babel 配置文件中追加一些默认的配置项。使用 @sage-cli/plugin-preset-none 插件，我们也可以获得完全自定义 babel 配置的能力。例如，以下代码演示如何使用自定义的 babel 配置来处理项目中的 JavaScript 代码：
-- -------------------- ---- -------
-- --------------
----- ---- - ----------------
----- ----------- - -----------------------------
-------------- - -
-------- -
-------------------------------- ----
--
-------- ---
--------------- -
------------ -
------------ -------------
-------- -
--------------------
----------------------
--
-------- -
------------------------------------------
--------------------------------------
--
---
------ -----------------
------- -
----- ----------------------- ----------
--------- ------------
--
--
----------- -
------------ -------------
-------- -
--------------------- -
-------- -
-- ----
----- - ----------
-------- -----
--
------------ --------
------- --
---
----------------------
--
-------- -
----------------------------------- -
------------ -----
---
------------------------------------------
---------------------------
--------------------------------------
--
---
------ -----------------
------- -
----- ----------------------- ----------
--------- ------------
--
--
--
--在上述代码中，我们通过自定义 babelConfig 字段来指定项目的自定义 babel 配置。babelConfig 字段可以是一个函数，该函数返回一个完整的 babel 配置对象，供 Sage CLI 使用。该函数可以根据需要接收参数。
结论
使用 @sage-cli/plugin-preset-none 插件可以让我们获得完全自定义配置 Sage CLI 构建流程的控制权。通过自定义 Webpack 配置和 babel 配置，我们可以构建出更符合项目需求的构建流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067359890c4f7277583e63