Webpack 無法解析 JS 模塊（在 Typescript 項目中）

Question

我在將第 3 方庫與 Typescript、自定義類型和 Webpack 結合使用時遇到問題。 Webpack 無法解析第 3 方 JS 庫。

每當我手動編譯我的 .ts 文件並使用 Node.js 運行它時，它都會毫無問題地編譯並按預期執行。 但是，當我運行 Webpack 時，它退出並出現錯誤：

ERROR in ./index.ts
Module not found: Error: Can't resolve '@slack/client' in 'Z:\reproduction'
@ ./index.ts 1:0-45

我的第一個預感是它與作用域包（@slack/client）有關。 我嘗試將別名與 tsconfig 中的路徑映射結合使用，但這並沒有解決問題。 此外，將包直接復制到 ./node_modules 並從定義文件和導入中刪除范圍部分並沒有修復它。

我設法在一個小項目中重現了這個問題。 我向這個復制項目添加了兩個依賴項：“ @slack/client ”（無法解析的庫）和“ abs ”（作為完整性檢查）。 對於這兩個我創建了小的 .d.ts 定義文件。 abs lib 工作正常，但 @slack/client 仍然無法為 Webpack 解析。

我對 Typescript 和 Webpack 很陌生，所以我懷疑我忽略了一些明顯的東西。 我就是想不通是什么。 好消息是，嘗試解決這個問題已經讓我對 Webpack 和 Typescript 有很多想法:-)

有人能指出我正確的方向嗎？

我設法用以下文件重現它：

包.json

{
    "devDependencies": {
        "awesome-typescript-loader": "^3.0.0-beta.18",
        "typescript": "^2.1.5"
    },
    "dependencies": {
        "@slack/client": "^3.8.1",
        "abs": "^1.3.6"
    }
}

配置文件

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": true,
        "sourceMap": false
    }
}

webpack.config.js

module.exports = {
  entry: './index.ts',
  target: 'node',
  module: {
    loaders: [
      { 
        test: /\.ts(x?)$/, 
        loader: 'awesome-typescript-loader' 
      }
    ]
  },
  resolve: {
    extensions: ['.ts'],
  },
  output: {
    libraryTarget: 'commonjs',
    path: './',
    filename: 'index.js'
  }
}

絕對值

declare module 'abs' {
  function abs(input: any): any;
  namespace abs {}
  export = abs;
}

@slack_client.d.ts

declare module '@slack/client' {
    export const CLIENT_EVENTS: {
        RTM: {
            ATTEMPTING_RECONNECT: string;
        };
    };
}

索引.ts

import * as slackClient from '@slack/client';
import * as abs from 'abs';

var absPath: string = abs('./');
console.log(absPath);

var added: string = slackClient.CLIENT_EVENTS.RTM.ATTEMPTING_RECONNECT;
console.log(added);

筆記

• @slack/client 的定義文件在名稱中帶有 @ 時可能看起來有點奇怪。 我嘗試為這兩個定義更改它，但這並沒有太大作用。 Abs 繼續工作，@slack/client 一直失敗。
• 網絡包版本：2.2.1
• 打字稿版本：2.1.5

Answer 1

我懷疑這一行：

extensions: ['.ts']

需要是：

extensions: ['.js', '.ts']

甚至更好：

extensions: ['.js', '.ts', '.tsx']

捕獲大多數情況。