[英]Webpack unable to resolve JS module (in Typescript project)
I'm having a problem using a 3th party library in combination with Typescript, custom typings and Webpack.我在将第 3 方库与 Typescript、自定义类型和 Webpack 结合使用时遇到问题。 Webpack is unable to resolve the 3th party JS library. Webpack 无法解析第 3 方 JS 库。
Whenever I manually compile my .ts file and run it with Node.js it compiles without any problems and executes as expected.每当我手动编译我的 .ts 文件并使用 Node.js 运行它时,它都会毫无问题地编译并按预期执行。 However, when I run Webpack it exits with an error:但是,当我运行 Webpack 时,它退出并出现错误:
ERROR in ./index.ts
Module not found: Error: Can't resolve '@slack/client' in 'Z:\reproduction'
@ ./index.ts 1:0-45
My first hunch was that it had something to do with the scoped package (@slack/client).我的第一个预感是它与作用域包(@slack/client)有关。 I tried working with aliases combined with path mapping in tsconfig for this package but this didn't resolve the problem.我尝试将别名与 tsconfig 中的路径映射结合使用,但这并没有解决问题。 Also, copying the package directly to ./node_modules and removing the scoped part from the definition file and the imports did not fix it.此外,将包直接复制到 ./node_modules 并从定义文件和导入中删除范围部分并没有修复它。
I managed to reproduce the problem in a small project.我设法在一个小项目中重现了这个问题。 I added two dependencies to this reproduction project: " @slack/client " (the unresolvable lib) and " abs " (as a sanity check).我向这个复制项目添加了两个依赖项:“ @slack/client ”(无法解析的库)和“ abs ”(作为完整性检查)。 For both I created small .d.ts definition files.对于这两个我创建了小的 .d.ts 定义文件。 The abs lib is working flawlessly, but the @slack/client remains unresolvable for Webpack. abs lib 工作正常,但 @slack/client 仍然无法为 Webpack 解析。
I'm quite new to Typescript and Webpack, so I suspect I'm overlooking something obvious.我对 Typescript 和 Webpack 很陌生,所以我怀疑我忽略了一些明显的东西。 I just can't figure out what.我就是想不通是什么。 The good thing is though, trying to resolve this problem already thought me a lot about Webpack and Typescript :-)好消息是,尝试解决这个问题已经让我对 Webpack 和 Typescript 有很多想法:-)
Can anybody point me in the right direction?有人能指出我正确的方向吗?
I managed to reproduce it with the following files:我设法用以下文件重现它:
package.json包.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 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 @slack_client.d.ts
declare module '@slack/client' {
export const CLIENT_EVENTS: {
RTM: {
ATTEMPTING_RECONNECT: string;
};
};
}
index.ts索引.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);
Notes笔记
I suspect that this line:我怀疑这一行:
extensions: ['.ts']
needs to be:需要是:
extensions: ['.js', '.ts']
or even better:甚至更好:
extensions: ['.js', '.ts', '.tsx']
to capture most cases.捕获大多数情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.