如何從 Typescript 中的 package.json 獲取版本？

Question

我找到了這個問答。

我試圖從 package.json 獲取版本：

import { version } from './package.json';

但它導致：

package.json' has unsupported extension. The only supported extensions are '.ts',
'.tsx', '.d.ts'.

Answer 1

如果你在 commonJS 環境中，為什么不簡單地使用

const pj = require('./package.json')
console.log(pj.version)

編輯

既然你好像在用webpack，就添加合適的loader

   module: {
    loaders: [
        ...
        {test: /\.json$/, loader: 'json-loader'},
        ....

顯然你需要使用npm install

Answer 2

對於為瀏覽器設計且不依賴於 Webpack 或任何其他依賴項的庫，我喜歡這樣做的方式是向package.json添加一個prebuild腳本，將版本寫入文件。

  "scripts": {
    "prebuild": "node -p \"'export const LIB_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'\" > src/version.ts",
    "build": "tsc",
  }

這將使用以下代碼運行 node.js：

'export const LIB_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'

並將輸出重定向到src/version.ts

這導致version.ts包含：

export const LIB_VERSION = "1.0.0";

然后，您可以簡單地從其他文件導入和使用它：

import { LIB_VERSION } from './version';

Answer 3

有多種方法，但我發現最有用的方法是使用 ng-node-environment 包。 這會生成一個文件./src/environments/base.ts ，您可以在打字稿導入中直接引用該文件。 它包含一個名為sharedEnvironment的常量對象。 您的導入行如下所示： import sharedEnvironment from './base' ;

當您執行該命令時，它會查找所有以 'NG_' 開頭的環境變量，並將它們作為屬性添加到sharedEnvironment 。

因此，我創建了一個package.json腳本來設置變量並執行 ng-node-environment。 為了兼容性，我使用 cross-env 使其與平台無關（適用於 windows 和 *nix）

這是我的 package.json 腳本：-

"scripts": {
    "version": "cross-env-shell NG_APPVERSION=$npm_package_version node ./node_modules/ng-node-environment/index.js",
    "another" : "echo hello world"
}

然后運行： npm run version提取版本並放入./src/environments/base.ts

我現在可以訪問屬性appversion並在我的environment.ts使用它。

注意：如果我調用了變量NG_APP_Version則屬性名稱將使用駝峰式appVersion為appVersion

import sharedEnvironment from './base';

export const environment = {
  production: false,
  logLevel: LogLevel.Error,
  version : sharedEnvironment.appversion,
};

當然，這樣我可以通過在執行ng-node-environment之前設置其他變量來添加package.json的其他值，或者可以通過創建名為NG_<Something>變量來提前添加更多屬性，例如： NG_GitBranch 、 NG_ComputerName 、 NG_CliVersion等

在 Angular 中開發並確保它始終保持同步時，我使用啟動腳本開始開發：-

"scripts": {
    "version": "cross-env-shell NG_APPVERSION=$npm_package_version node ./node_modules/ng-node-environment/index.js",
    "start": "npm run version && ng serve"
}

所以我輸入： npm start它會同步版本號、構建和啟動

Answer 4

為了避免包含整個 package.json 文件，我通常會創建一個名為buildData.json的模板並將其放在templates文件夾中。 我給它以下內容。

{
    "version": [<%= options.version %>]
}

然后在nuxt.config.js中，將模板添加到構建部分：

  build: {
    templates: [
      {
        src: "./templates/buildData.json",
        dst: "../buildData.json",
        options: {
          version: require("./package.json").version
        }
      }
    ]
  }

這將生成僅包含版本號的buildData.json文件。 完整的package.json文件在構建時只讀，不包括發送到瀏覽器的文件。

最后，在需要版本號的地方添加此代碼：

const version = require("@/buildData.json").version;

確保您提供給require語句的文件是生成的buildData.json而不是templates文件夾中的文件。