简介
@jgbjs/plugin-json 是一个使用 Rollup 压缩或编译时，根据指定的 JSON 文件内容，生成相应的 JavaScript 文件的插件。
这一插件的用途是，当我们在项目中使用了大量 JSON 配置文件时，我们希望将它们转换为 JavaScript 文件以便于内部使用。使用该插件，我们可以将 JSON 文件内容作为 JavaScript 函数体的一部分，从而方便地引入和使用它们。
安装
使用 npm 安装：
npm install -D @jgbjs/plugin-json
配置
-- -------------------- ---- -------
------ ---- ---- ---------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
------
-- --------------
-------- ------------
-- ----- ------
-- -------- ---- -----------
-- -- --------------------- --- -------------------
-- ----------------------
-- -- -- ----------------
-- --------------------
------------- ------- ----- -- ------------------
-- -----------
-- ------- ---- -------------
-- ------------------------
-- ---------------- ---- -----
-- -------------- ------ -----
-- ---------------- ---------- ---
---------------- ------ ----- --
-- ------ ----- ---------
------- ------- ---------------------- ---------------------------
--
-
--使用
在使用该插件生成的 JavaScript 模块时，您只需要像使用任意其他 JavaScript 模块一样引入即可：
import config from './path/to/config.json';
console.log(config); // {foo: 'bar', baz: 42}除非您修改了 generateName 选项，否则默认情况下，该插件会将 JSON 文件路径转换为相应的 JavaScript 文件路径。比如，path/to/config.json 将会被转换为 path/to/config.js。
您也可以使用一些预定义变量来指定自定义的模块 ID，比如：
json({
// 生成的模块 ID 指定为文件名（不包含后缀），
// 其所属的目录层级（相对于项目根目录）以及带有特定前缀的名称，
// 例如：'configs/path/to/config'
generateName: ({name, dir}) => `configs/${dir}/${name}`,
include: 'src/configs/**/*.json'
})此时，在使用该模块之前，您需要先手动将生成的 JavaScript 文件导出一个 default 属性：
export {default as config} from './configs/path/to/config.js';然后就可以像上文一样引入使用该模块了：
import {config} from './path/to/config.js';
console.log(config); // {foo: 'bar', baz: 42}细节
导出格式
该插件默认情况下会将 JSON 文件内容的所有属性导出为一个对象。例如，如果 path/to/config.json 包含如下内容：
{
"foo": "bar",
"baz": 42
}则插件生成的 path/to/config.js 文件内容如下：
export default {
"foo": "bar",
"baz": 42
};如果您在配置中通过 generateContent 选项自定义了模块内容，则该选项的返回值会被用于生成相应的 JavaScript 文件。该字符串应该是一个包含模块内容的 JavaScript 代码片段，例如：
json({
generateContent: (json, _ctx) => {
return `
export const FOO = ${JSON.stringify(json.foo)};
export const BAZ = ${json.baz};
`;
}
})外部文件
由于该插件的作用是在 Rollup 的压缩或编译阶段生成相应的 JavaScript 模块，因此它所处理的文件必须包含在 Rollup 的输入文件列表之内。如果您需要处理的 JSON 文件是通过其他方式（例如通过 HTTP 请求）获取的，则该插件无法帮助您将其转换为 JavaScript 模块。
与其他插件的兼容
该插件只会处理在 include 选项匹配的文件中包含的 JSON 代码。其他类型的代码（例如 JavaScript 代码）不会受到该插件的影响。因此，您可以使用其他插件来处理代码中包含的其他资源类型。
例如，如果您需要处理模块中包含的 SVG 资源（例如通过 <img> 或 background-image 加载的 SVG 资源），您可以使用 @svgr/rollup 插件将这些资源转换为 React 组件，之后再在其他 HTML 或 JavaScript 代码中使用这些组件。
总结
在本文中，我们介绍了 @jgbjs/plugin-json——一个使用 Rollup 生成 JavaScript 模块的插件。该插件适用于项目中包含大量 JSON 配置文件的情况，可以将这些 JSON 文件转换为 JavaScript 对象，从而使得在代码中使用这些配置更加方便。
在上文中，我们介绍了如何安装、配置、以及使用该插件。我们还讨论了一些可能会遇到的问题，并提供了一些解决方案。
最后，我们只是简单介绍了该插件的一些功能和用法，如果您想深入了解该插件的更多细节，还可以查看 该插件的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115158