如何在TypeScript中像导入常规JSON一样导入JSON5文件？

首先，你遇到的Cannot find module '../conf/config.json5'错误，本质是TypeScript默认不认识.json5后缀的模块，同时Node.js本身也不支持直接导入JSON5文件（不像标准JSON）。下面一步步解决这个问题，再逐个回答你的疑问：

核心问题解决步骤 #

1. 安装JSON5解析依赖 #

首先需要安装json5包，用来解析JSON5内容：

npm install json5 --save
# 或者用yarn
yarn add json5

2. 配置TypeScript识别.json5模块 #

在项目根目录创建一个typings/json5.d.ts文件（或者直接在现有.d.ts文件里添加），内容如下：

declare module '*.json5' {
  const value: any;
  export default value;
}

如果想要更精确的类型（比如和你的JSON5结构匹配），可以把any换成你定义的接口类型，这样后续智能提示会更准确。

然后修改tsconfig.json，确保TypeScript能识别这个类型声明文件：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./typings"]
    // 其他配置...
  }
}

3. 配置Node.js（或打包工具）支持JSON5导入 #

如果是在Node.js环境下运行，你需要用json5来手动导入解析：

import json5 from 'json5';
import fs from 'fs';

const config = json5.parse(fs.readFileSync('../conf/config.json5', 'utf8'));

如果是用Webpack这样的打包工具，可以添加json5-loader：

npm install json5-loader --save-dev

然后在webpack配置里添加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.json5$/i,
        loader: 'json5-loader',
        type: 'javascript/auto',
      },
    ],
  },
};

这样配置后，你就可以像导入JSON一样直接写：

import config from '../conf/config.json5';

你的三个疑问解答 #

1. 能否像常规JSON一样获得.json5文件内容的智能提示？ #

当然可以！只要你给.json5的类型声明定义了具体的接口，而不是用any。比如你的JSON5内容是：

{
  appName: 'MyApp',
  port: 3000,
  features: ['auth', 'dashboard']
}

你可以先定义接口：

interface AppConfig {
  appName: string;
  port: number;
  features: string[];
}

然后修改类型声明：

declare module '*.json5' {
  const value: AppConfig;
  export default value;
}

这样VS Code就能像识别JSON一样给你智能提示了。如果JSON5内容经常变动，也可以用工具自动生成类型声明，比如json-schema-to-typescript结合JSON5的Schema。

2. 它的工作方式是否与require()一致？ #

配置正确的话，效果是一致的，但底层逻辑有区别：

• 标准JSON的require()是Node.js原生支持的，会自动解析成对象；
• JSON5的require()需要你手动处理（比如require('json5').parse(require('fs').readFileSync('./config.json5', 'utf8'))），或者通过自定义require.extensions来让Node自动解析，但这种方式不推荐，因为Node官方不鼓励修改require.extensions；
• 如果用打包工具（Webpack/Vite）配置了loader，那么import和require()的表现就和标准JSON几乎一致，都会直接返回解析后的对象。

3. 是否必须使用import()而非常规import语法？ #

不是必须的！只要完成前面的TypeScript类型配置和打包工具/Node环境的解析配置，就能使用常规的import语法。import()是动态导入，一般用于代码分割场景，和JSON5导入没有强制绑定关系。

内容的提问来源于stack exchange，提问作者Zoro