如何在 TypeScript 中导入 package.json？

Question

我正在尝试在 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") 声明一个类型，并在上面定义这些属性？

Answer 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

Answer 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 解析响应。

Answer 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 访问这些变量，等等其他字段。

Answer 4

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

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

2. 使用 typings

   导入 package.json

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

Answer 5

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