如何讓 webpack 包含為 Typescript Nodejs（不是瀏覽器）項目生成的聲明文件（以及如何使用）

Question

我有 2 個打字稿項目，1 個取決於另一個。 我可以通過在 tsconfig 中設置 "declaration": true 來生成打字稿聲明文件（這適用於兩個項目）。 我還將“outDir”設置為“./dist”。 我可以看到大量生成的聲明文件發送到 dist 文件夾。

我也在使用 webpack。 但是如何讓 wepack 將所有這些聲明文件包含在包中，以便客戶端可以使用它？

所以我的 tsconfig 看起來像這樣：

{
  "compilerOptions": {
    "allowJs": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "Node",
    "noImplicitAny": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es5",
    "declaration": true,
    "outDir": "./dist",
    "types": [
      "mocha", "node", "./dist/index.d.ts"
    ],
    "lib": [
      "es5",
      "es2015",
      "es6",
      "dom"
    ]
  },
  "include": [
    "lib/**/*", "tests/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

但是，這是行不通的。 請參閱以下錯誤消息：

ERROR in /Users/Plastikfan/dev/github/js/jaxom/tsconfig.json
[tsl] ERROR
      TS2688: Cannot find type definition file for './dist/index.d.ts'.

實際上，當我看到這個時：

"types": [
  "mocha", "node", "./dist/index.d.ts"
],

這讓我很擔心，因為 /dist/index.d.ts 是 webpack/typescript 構建過程的輸出，所以當它可能不存在時，構建如何在構建過程開始時看到它的內容。 對我來說這似乎不對，那么我如何聲明“./dist/index.d.ts”是項目的聲明？

那么一旦解決了這個問題，typescript 客戶端如何使用 typescript/javascript 包； 即我有另一個項目（zenobia）也是一個打字稿項目，它需要從 npm 使用打字稿項目，那么我需要做什么才能讓它正常工作？ Jaxom 是要使用的源打字稿項目，在它的索引文件中，它導出所有面向客戶端的聲明實際上看起來像這樣：

index.ts:
export * from './types';
export * from './specService/spec-option-service.class';
export * from './converter/xpath-converter.class';

與對應生成的 dist/index.d.ts 相同

在消費方面（zenobia）我知道我需要某種三斜線指令和一個導入語句，但是我繞圈子沒有得到它。

Zenobia 中的 tsconfig 與 jaxom 相同（如我上面所示）。

客戶端上的導入如下所示：

import * as Jaxom from 'jaxom';

所以我希望導出的所有定義都可以在 Jaxom 上使用。 這個導入應該可以工作，因為它的打字稿。 如果是 js，那么這不適用於 Nodejs 項目。

我讀過的文檔對我來說要么含糊不清，要么我需要的解釋介於 webpack 和 typescript 之間，既沒有正確解釋完整的集成，也沒有做出假設。

在 Jaxom 中，我有 2 個 webpack 配置（1 個用於生產代碼，另一個用於測試）。 這是我在所有 webpack/typescript 項目中使用/正在使用的模式。

Jaxom 的生產 webpack 配置：

module.exports = env => {
  const { getIfUtils } = require('webpack-config-utils');
  const nodeExternals = require('webpack-node-externals');
  const { ifProduction } = getIfUtils(env);
  const mode = ifProduction('production', 'development');

  console.log('>>> Jaxom Webpack Environment mode: ' + env.mode);
  return {
    entry: {
      index: './lib/index.ts'
    },
    target: 'node',
    externals: [nodeExternals()],
    mode: mode,
    module: {
      rules: [
        {
          test: /\.ts(x?)$/,
          use: 'ts-loader'
        },
        {
          test: /\.json$/,
          use: 'json-loader'
        }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
      new webpack.BannerPlugin({
        banner: '#!/usr/bin/env node',
        raw: true
      })
    ],
    resolve: {
      extensions: ['.ts', '.json']
    },
    watchOptions: {
      ignored: /node_modules/
    },
    output: {
      filename: 'jaxom-bundle.js',
      sourceMapFilename: 'jaxom-bundle.js.map',
      path: path.join(__dirname, 'dist'),
      libraryTarget: 'commonjs'
    }
  };
};

以及用於測試的 webpack 配置

module.exports = {
  devtool: 'source-map',
  mode: 'development',
  entry: ['./tests/all-tests-entry.js', './lib'],
  target: 'node',
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.xml$/i,
        use: 'raw-loader'
      },
      { test: /\.ts(x?)$/, loader: 'ts-loader' },
      { test: /\.json$/, loader: 'json-loader' }
    ]
  },
  resolve: {
    extensions: ['.ts', '.json']
  },
  watchOptions: {
    ignored: /node_modules/
  },
  output: {
    filename: 'jaxom-test-bundle.js',
    sourceMapFilename: 'jaxom-test-bundle.js.map',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs'
  }
};

Answer 1

對於其他在這個問題上磕磕絆絆的初學者，無法從客戶端角度消費類型的問題是由源包中的眾多問題引起的，解釋如下。

1）實際上，有一個問題只有 package.json 才明顯，它沒有包含在原始帖子中，但它相當於：

• 有 2 個構建流，1 個用於源代碼，另一個用於測試（在我的 package.json 中，它們由 2 個單獨的腳本表示： “build:d”用於開發源代碼 [產生./dist/jaxom-bundle。 js ] build 和“build:t”用於測試代碼構建 [產生./dist/jaxom-test-bundle.js ]。這兩個腳本都依賴於一個“干凈”的腳本，它利用 rimraf 來刪除現有的構建文件（在“dist/”文件夾中。使用我當前的構建設置，構建測試刪除了所有現有的構建文件，然后構建了測試包。源包丟失了。

• 這意味着當我去打包構建（ npm pack以創建發布到 npm 注冊表的 tar 球）時，如果我在發布之前剛剛運行測試構建，那么包含所有測試的測試捆綁將被打包。 這不是我想要的。 這種情況的簡單修復是確保就在 npm pack/publish 之前，應構建源包，這在您查看構建時很明顯：即，您可以看到包含的類型文件。 對於那些剛剛起步的開發人員來說，意識到這一點非常重要。 在發布一個 npm 包（尤其是新包）之前，你應該先通過 npm pack 使用這一步，然后提取它的內容看看里面有什么，或者只是注意 npm pack 的結果並觀察里面有什么包。

查看源和測試包的 npm pack 的以下輸出：

源包（./dist/jaxom-bundle.js）：

λ ~/dev/github/js/jaxom/ feature/define-exports* npm pack
npm notice 
npm notice 📦  jaxom@0.0.1
npm notice === Tarball Contents === 
npm notice 1.1kB   LICENSE                                           
npm notice 165.5kB dist/jaxom-bundle.js                              
npm notice 3.2kB   package.json                                      
npm notice 99B     README.md                                         
npm notice 455B    typings/exceptions.d.ts                           
npm notice 133B    typings/index.d.ts                                
npm notice 1.1kB   typings/normaliser/normaliser.class.d.ts          
npm notice 1.8kB   typings/specService/spec-option-service.class.d.ts
npm notice 9.4kB   typings/transformer/transformer.class.d.ts        
npm notice 2.5kB   typings/types.d.ts                                
npm notice 1.3kB   typings/converter/xpath-converter.class.d.ts      
npm notice 5.6kB   typings/converter/xpath-converter.impl.d.ts       
npm notice === Tarball Details === 
npm notice name:          jaxom                                   
npm notice version:       0.0.1                                   
npm notice filename:      jaxom-0.0.1.tgz                         
npm notice package size:  50.5 kB                                 
npm notice unpacked size: 192.2 kB                                
npm notice shasum:        c43be4000932201c0ca077aeb3f102bd0130eef5
npm notice integrity:     sha512-96HaZbSHn7kCc[...]rS0K4pLxDMLPA==
npm notice total files:   12                                      
npm notice 
jaxom-0.0.1.tgz
λ ~/dev/github/js/jaxom/

被測試類（spec.d.ts）污染的測試包（./dist/jaxom-test-bundle.js）：

λ ~/dev/github/js/jaxom/ feature/define-exports* npm pack
npm notice 
npm notice 📦  jaxom@0.0.1
npm notice === Tarball Contents === 
npm notice 1.1kB   LICENSE                                                      
npm notice 165.5kB dist/jaxom-bundle.js                                         
npm notice 186.0kB dist/jaxom-test-bundle.js                                    
npm notice 3.2kB   package.json                                                 
npm notice 253.4kB dist/jaxom-test-bundle.js.map                                
npm notice 99B     README.md                                                    
npm notice 455B    typings/exceptions.d.ts                                      
npm notice 455B    typings/lib/exceptions.d.ts                                  
npm notice 133B    typings/index.d.ts                                           
npm notice 133B    typings/lib/index.d.ts                                       
npm notice 1.1kB   typings/lib/normaliser/normaliser.class.d.ts                 
npm notice 1.1kB   typings/normaliser/normaliser.class.d.ts                     
npm notice 11B     typings/tests/normaliser/normaliser.class.spec.d.ts          
npm notice 1.8kB   typings/lib/specService/spec-option-service.class.d.ts       
npm notice 1.8kB   typings/specService/spec-option-service.class.d.ts           
npm notice 20B     typings/tests/specService/spec-option-service.class.spec.d.ts
npm notice 329B    typings/tests/test-helpers.d.ts                              
npm notice 9.4kB   typings/lib/transformer/transformer.class.d.ts               
npm notice 9.4kB   typings/transformer/transformer.class.d.ts                   
npm notice 20B     typings/tests/transformer/transformer.class.spec.d.ts        
npm notice 2.5kB   typings/lib/types.d.ts                                       
npm notice 2.5kB   typings/types.d.ts                                           
npm notice 1.3kB   typings/converter/xpath-converter.class.d.ts                 
npm notice 1.3kB   typings/lib/converter/xpath-converter.class.d.ts             
npm notice 20B     typings/tests/converter/xpath-converter.class.spec.d.ts      
npm notice 5.6kB   typings/converter/xpath-converter.impl.d.ts                  
npm notice 5.6kB   typings/lib/converter/xpath-converter.impl.d.ts              
npm notice 20B     typings/tests/converter/xpath-converter.impl.spec.d.ts       
npm notice === Tarball Details === 
npm notice name:          jaxom                                   
npm notice version:       0.0.1                                   
npm notice filename:      jaxom-0.0.1.tgz                         
npm notice package size:  115.6 kB                                
npm notice unpacked size: 654.3 kB                                
npm notice shasum:        8433700d3378bf2ab4ff3798a93e7dbb98baee86
npm notice integrity:     sha512-cQ9RUCLwHMOuq[...]xS4kMJe/4jPqQ==
npm notice total files:   28                                      
npm notice 
jaxom-0.0.1.tgz
λ ~/dev/github/js/jaxom/

我認為上述問題的最佳解決方案是擁有一個特定的發布腳本，在發布到 npm 之前構建正確的包。 我找到了幾篇很好的文章來解釋這一點： 逐步：構建和發布 NPM Typescript 包或將 TypeScript 包發布到 NPM 的 30 秒指南

2）在一個單獨的文件夾中輸入（我的錯！）。

• 在閱讀了大量關於該主題的文章后，我得出了一個錯誤的結論，即將生成的類型與生成的 ./dist js 包放在一個單獨的文件夾中是個好主意。 這只會使用戶使用該庫變得更加笨拙且使用起來不直觀。 而不是導入 jaxom： "import * as jaxom from 'jaxom'" ，您需要使用"import * as jaxom from 'jaxom/typings'" （其中“typings”是您導出類型到定義的目錄的名稱by type/typings entry in jaxom's package.json. 這不是一個好主意，也不是我想要的。

最好讓類型生成到與主包相同的文件夾中，在本例中為 ./dist。