如何从 package.json 加载 angular (v4+) 应用程序中的版本号？

Question

我正在尝试从 package.json 加载我的 Angular 应用程序的版本号，因为这是版本号所在的位置。在查找如何执行此操作时，大多数人建议使用 require 来加载 json 文件，例如：

var pckg = require('../../package.json');
console.log(pckg.version);

当我将此代码放入组件的构造函数中时，我得到未定义。

接下来我尝试通过导入将 require 语句放在组件上方：

const { version: appVersion } = require('../../package.json')

export class WhosebugComponent {
  public appVersion

  constructor() {
    this.appVersion = appVersion
  }
}

当 require 试图解析 json 文件时，我得到 Error: (SystemJS) Unexpected token :。当我将鼠标悬停在 require 上时，我看到它的类型为 "NodeRequire(id: string)"。这与 requirejs 不同吗？

我正在使用 systemjs，我注意到很多有答案的人都指的是 Webpack。以下是相关文件，可以帮助您解决我的问题。

tsconfig.json:

{
  "compilerOptions": {
   "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },
  "compileOnSave": true,
   "exclude": [
    "node_modules/*",
    "**/*-aot.ts"
  ]
}

package.json 中的开发依赖项：

"devDependencies": {
    "@types/node": "^6.0.46",
    "concurrently": "^3.0.0",
    "lite-server": "^2.3.0",
    "rollup": "^0.50.0",
    "rollup-plugin-commonjs": "^8.2.1",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-uglify": "^2.0.1",
    "source-map-explorer": "^1.5.0",
    "typescript": "~2.3.2"
  },

Answer 1

如果您将以下内容添加到 typings.d.ts 中：

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

然后您可以这样做：

import * as pkg from '../path-to-root/package.json';

以后会这样称呼它，例如在你组件的构造函数中：

 console.log(`version: ${pkg['version']}`);

或者，等价地，

console.log(`version: ${(<any>pkg).version}`);

Answer 2

您遇到的问题是 SystemJS 试图将 JSON 文件解释为可执行文件。为了让 SystemJS 明智地加载 JSON 文件，您需要使用 JSON 加载程序，例如 systemjs-plugin-json.

您需要使其在您的 SystemJS 配置中可用。例如，我使用：

SystemJS.config({
  paths: {
    // Set an abbreviation to avoid having to type /node_modules/ all the time.
    "npm:": "/node_modules/",
    // ....
  },
  map: {
    // The loader is known to SystemJS under the name "json".
    json: "npm:systemjs-plugin-json",
    // ...
  },
  packageConfigPaths: [
    // Tell SystemJS that it should check the package.json files 
    // when figuring out the entry point of packages. If you omit this, then
    // the map above would have to be "npm:systemjs-plugin-json/json.js".
    "npm:*/package.json",
    // ...
  ],
});

那你就要用到它了。你可以用 require('../../package.json!json'); 替换你的 require 调用，但我怀疑 TypeScript 不会因为时髦的模块名称而对此感到满意。 !json 部分告诉 SystemJS 使用 json 加载器。我从不这样做。相反，我在我的配置中设置了一个 meta 来告诉 SystemJS，"use the json loader when you load this file":

SystemJS.config({
  meta: {
    "path/to/package.json": {
      loader: "json",
    },
  },
});

您需要根据其余的 SystemJS 配置来计算 path/to/package.json，尤其是 baseUrl。

如何从 package.json 加载 angular (v4+) 应用程序中的版本号？

How to load version number in angular (v4+) app from package.json?

json

typescript

systemjs

angular