如何在 TypeScript 中导入 package.json？

Posted 2023-03-13

【中文标题】如何在 TypeScript 中导入 package.json？

【英文标题】：How to import package.json in TypeScript?

【发布时间】：2018-11-22 03:43:09

【问题描述】：

我正在尝试在 TypeScript 中导入我的 package.json 文件，但它似乎不起作用。具体来说，我只是想导入它，以便我可以访问日志语句的名称和版本属性。比如：

import * as pjson from '../package.json';
// other code here
log.info(`$pjson.name:$pjson.version` started on port ...);

我们在其他使用 Node/Babel 的项目中的其他地方也有相同的语法，但我试图围绕这些部分引入一些 TypeScript。在其他地方我们会做类似的事情：

import  name, version from '../package.json';

但这在这里不起作用。我按照https://www.npmjs.com/package/json-d-ts 的说明进行操作，这至少使我的导入语句中的错误消失了，但现在当我尝试访问属性时，我收到以下错误：

src/index.ts(20,21): error TS2339: Property 'name' does not exist on type 'typeof import("*.json")'.
src/index.ts(20,35): error TS2339: Property 'version' does not exist on type 'typeof import("*.json")'.

有没有办法解决这个问题，还是我只需在某处硬编码这些值（而不是从 package.json 动态检索它们）？也许我可以为import("*.json") 声明一个类型，并在上面定义这些属性？

【参考方案1】：

Typescript 应该可以做到如下：

import * as pack from "../package.json"

// access name and version like this:

console.log(pack.name);

查看支持类型正确的 JSON 导入下的第三个灰色框。https://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#json-imports

【讨论】：

导入名称不应该是“包”，因为它会返回以下错误：TS1213: Identifier expected。 'package' 是严格模式下的保留字。类定义自动处于严格模式。

import * as pack from '../package.json'; 应该可以工作

【参考方案2】：

从 TypeScript 2.9 开始，您可以按照此处所述导入 JSON 文件： typescriptlang documentation 2.9#json，为此您需要在 tsconfig.json 中启用“resolveJsonModule”选项。

您的项目中需要 typescript 2.9 版：

npm i typescript@latest --save 或 yarn add typescript

如果您使用 tsc 从命令行构建 typescript 文件，则需要全局安装最新的 typescript 版本：

npm i -g typescript@latest 或 yarn global add typescript

如果您使用webpack 和webpack-dev-server 构建项目，您需要确保json 文件作为静态文件托管在webpack-dev-server 上下文中。即使你托管它们，你也不能像这样在 web 环境中 import json 文件，你需要使用 ajax 请求加载 json 文件并使用 JSON.parse 解析响应。

【讨论】：

完美，谢谢。唯一需要注意的是，我必须包含 BOTH resolveJsonModule 选项以及 esModuleInterop。一旦我将这两者都设置为 true，它最终对我有用。

将 resolveJsonModule 添加到 tsconfig.json 对我有用

【参考方案3】：

如何导入 *.json ？

正如已经回答的那样，您需要 Typescript >= 2.9 和tsconfig.json 中的以下设置：

  "resolveJsonModule": true,
  "esModuleInterop": true,
  "module": "commonjs"

但有限制：

你必须编译到 CommonJS 所有导入的 JSON 必须位于 "rootDir" 下

不幸的是，"rootDir" 通常是一个文件夹下面 package.json 像'./src' 这样事情就会失败。

所以： 如何导入 package.json ？ 你可以require它：const pjson = require('../package.json');

如果你使用 npm.start：you don't need to :

package.json 字段附加在 npm_package_ 前缀上。因此，例如，如果您的 package.json 文件中有 "name":"foo", "version":"1.2.5"，那么您的包脚本会将 npm_package_name 环境变量设置为“foo”，并且 npm_package_version 设置为“1.2.5”。您可以在代码中使用 process.env.npm_package_name 和 process.env.npm_package_version 访问这些变量，等等其他字段。

【讨论】：

赞成包含 package.json 在 rootDir 之外的问题。

感谢“您不需要”的洞察力！

请注意，环境变量也适用于我们这些使用纱线的人（字段名称仍以“npm_package_”为前缀）。

"process.env.npm_package_version" - 对我来说是一个很好的解决方案。太棒了，我不知道这是可能的。

【参考方案4】：

确保 tsconfig.json 编译器选项包含：

"resolveJsonModule": true, "esModuleInterop": true, "module": "commonjs"

使用 typings

导入 package.json

import * as pack from '../package.json';

【参考方案5】：

npm 将package.json 属性导出为带有前缀npm_package_ 的环境变量，如npm docs 中所述 因此，如果您使用的是 npm，则可以将版本设置为 process.env.npm_package_version

【讨论】：

使用 package.json 的最佳答案。非常感谢❤️

不是 Vite！ ?