在使用 TypeScript 和 Webpack 开发前端项目的过程中，我们可能会遇到导入 JSON 文件时遇到编译器报错的问题。这篇文章将介绍这个问题的原因和解决方法，并提供相关示例代码和实用指导。
问题表现
当我们使用 import 或 require 导入本地的 JSON 文件时，例如：
import data from './data.json';
TypeScript 编译器可能会报错：
Cannot find module './data.json' or its corresponding type declarations.
问题原因
导致这个问题的根本原因是 TypeScript 编译器默认不支持导入 JSON 文件。因此，无法正确地将 JSON 文件解析为 TypeScript 模块。
解决方法
有两种解决方法，分别是手动声明 JSON 文件模块和使用第三方库。
手动声明 JSON 文件模块
手动声明 JSON 文件模块可以让 TypeScript 编译器正确地解析 JSON 文件。只需创建一个以 .d.ts 结尾的文件，例如 data.d.ts，并在其中添加以下代码：
declare module '*.json' {
const value: any;
export default value;
}这个声明文件告诉 TypeScript 编译器，当你导入一个以 .json 结尾的模块时，它应该被视为一个任意类型的模块，并且默认导出的值应该是任意类型的。这样，我们就可以正确地使用 import 或 require 导入 JSON 文件了。
使用第三方库
另一种解决方法是使用第三方库，例如 json-loader 或 @rollup/plugin-json。这些库可以帮助我们正确地加载和解析 JSON 文件，而不需要手动声明模块。
json-loader
如果你正在使用 Webpack，你可以使用 json-loader，它会自动将 JSON 文件转换为 JavaScript 模块。
首先，通过 npm 安装 json-loader：
npm install --save-dev json-loader
然后，在 Webpack 的配置文件中添加以下规则：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
------- --------------
----- ------------------
--
--
--
--这个配置告诉 Webpack 在遇到以 .json 结尾的模块时，使用 json-loader 加载和解析它们。
@rollup/plugin-json
如果你正在使用 Rollup，你可以使用 @rollup/plugin-json，它会将 JSON 文件转换为 ES6 模块。
首先，通过 npm 安装 @rollup/plugin-json：
npm install --save-dev @rollup/plugin-json
然后，在 Rollup 的配置文件中添加以下插件：
import json from '@rollup/plugin-json';
export default {
plugins: [json()],
};这个配置告诉 Rollup 在打包时使用 @rollup/plugin-json 来处理 JSON 文件，并将它们转换为 ES6 模块。
示例代码
以下是一个简单的 TypeScript 和 Webpack/Rollup 配置示例，用于演示如何正确导入 JSON 文件：
TypeScript 代码
import data from './data.json'; console.log(data);
Webpack 配置
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
------- --------------
----- ------------------
--
--
--
--Rollup 配置
import json from '@rollup/plugin-json';
export default {
plugins: [json()],
};总结
在本篇文章中，我们介绍了 TypeScript 编译器在导入 JSON 文件时出现错误的问题，并提供了两种解决方法：手动声明 JSON 文件模块和使用第三方库。同时
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31033