Question

我在使用第三方库与Typescript，自定义类型和Webpack时遇到问题。 Webpack无法解析第三方JS库。

每当我手动编译我的.ts文件并使用Node.js运行它时，它会编译没有任何问题并按预期执行。但是，当我运行Webpack时，它会以错误退出：

create_table "users", force: :cascade do |t|
t.string   "email",                  default: "",        null: false
t.string   "encrypted_password",     default: "",        null: false
t.string   "reset_password_token"
t.datetime "reset_password_sent_at"
t.datetime "remember_created_at"
t.integer  "sign_in_count",          default: 0,         null: false
t.datetime "current_sign_in_at"
t.datetime "last_sign_in_at"
t.inet     "current_sign_in_ip"
t.inet     "last_sign_in_ip"
t.string   "type",                   default: "Account", null: false
t.datetime "created_at",                                 null: false
t.datetime "updated_at",                                 null: false
t.string   "first_name"
t.string   "last_name"
t.string   "confirmation_token"
t.datetime "confirmed_at"
t.datetime "confirmation_sent_at"
t.index ["confirmation_token"], name: "index_users_on_confirmation_token", unique: true, using: :btree
t.index ["email"], name: "index_users_on_email", unique: true, using: :btree
t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true, using: :btree
end

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

我设法在一个小项目中重现了这个问题。我在这个复制项目中添加了两个依赖项：＆＃34; @slack/client＆＃34; （不可解析的lib）和＆＃34; abs＆＃34; （作为理智检查）。对于这两个我创建了小的.d.ts定义文件。 abs lib工作正常，但@ slack / client仍然无法解决Webpack问题。

我对Typescript和Webpack很新，所以我怀疑我忽略了一些显而易见的事情。我无法弄清楚是什么。但好处是，尝试解决这个问题已经让我想到了很多关于Webpack和Typescript的内容： - ）

有人能指出我正确的方向吗？

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

的package.json

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

tsconfig.json

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

webpack.config.js

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

abs.d.ts

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

@ slack_client.d.ts

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

index.ts

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

备注的

@ slack / client的定义文件可能看起来有些奇怪，名字中带有@。我尝试为两个定义更改它，但这并没有做太多。 Abs继续工作，@ slack / client一直都在失败。
Webpack版本：2.2.1
打字稿版本：2.1.5

Answer 1

我怀疑这一行：

extensions: ['.ts']

需要：

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

甚至更好：

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

捕获大多数情况。

Webpack无法解析JS模块（在Typescript项目中）

1 个答案: