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

我的第一个预感是它与scoped package（@slack/client）有关。我尝试在此软件包的 tsconfig 中使用 aliases 和 path mapping 组合，但这并没有解决问题。此外，将包直接复制到 ./node_modules 并从定义文件中删除作用域部分，导入并没有修复它。

我设法在一个小项目中重现了这个问题。我向这个复制项目添加了两个依赖项：“@slack/client”（无法解析的库）和“abs”（作为健全性检查）。对于这两者，我都创建了小的 .d.ts 定义文件。 abs 库工作完美，但 @slack/client 对于 Webpack 仍然无法解析。

我对 Typescript 和 Webpack 还很陌生，所以我怀疑我忽略了一些明显的东西。我就是想不通是什么。好消息是，尝试解决这个问题已经让我想到了很多关于 Webpack 和 Typescript :-)

谁能指出我正确的方向？

我设法用以下文件重现了它：

package.json

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

tsconfig.json

{
    "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'
  }
}

abs.d.ts

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;
        };
    };
}

index.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 一直在失败。
• Webpack 版本：2.2.1
• 打字稿版本：2.1.5

Answer 1

我怀疑这行：

extensions: ['.ts']

需要：

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

甚至更好：

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

捕获大多数情况。