有没有办法阻止WebPack的构建过程失败,因为打字稿编译器开始对实际已在webpack的ProvidePlugin配置上配置的未解析变量大喊大叫?
webpack.config.js
plugins: [
...
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"_": "underscore",
"underscore": "underscore"
//'process.env.NODE_ENV': '"development"'
}),
]
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"declaration": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
https://webpack.github.io/docs/list-of-plugins.html#provideplugin
根据我的经验,打字稿不知道将哪些变量注入模块,因此构建未完成。
这是构建
的输出ERROR in ./src/file1.component.ts
(77,9): error TS2304: Cannot find name '$'.
ERROR in ./src/file2.component.ts
(78,13): error TS2304: Cannot find name '$'.
ERROR in ./src/file3.ts
(155,15): error TS2304: Cannot find name 'jQuery'.
ERROR in ./src/file4.ts
(108,9): error TS2304: Cannot find name '$'.
答案 0 :(得分:4)
我对ahz的回答不完全满意,因为我不希望在全球范围内安装类型或将jQuery
声明为any
,而失去所有类型检查。
对我有用的解决方案是创建具有以下内容的 global.d.ts :
import * as _jQuery from 'jquery';
declare global {
const jQuery: typeof _jQuery;
const $: typeof _jQuery;
}
此后,tsc
像没有任何警告一样通过Cannot find name '$'.
。
找到了here。
答案 1 :(得分:0)
如果我正确理解ProvidePlugin,你仍然需要声明jQuery和下划线作为模块(外部或别名)。
因此我建议在TypeScript中加载这些模块:
import * as $ from 'jquery';
import * as _ from 'underscore';
然后您只需要为这些库提供定义(.d.ts)文件。为此,我建议typings。
typings install jquery --global
typings install underscore --global
我假设你正在使用ts-loader来自动处理它。
如果您想避免使用import
语句,您仍然可以使用typings中的定义声明这些库。
或者您可以创建自己的简化声明:
declare var jQuery: any;
declare var $: any;
答案 2 :(得分:0)
我要补充最重要的答案,就是说存在一些例外,这是解决它们的方法。我使用Ant-Design和Redux来解决这个问题。
使用此功能时:
import _Fake from 'fake-lib'
declare global {
const Fake: typeof _Fake
}
它有效,但仅适用于已导出为名称空间的库(如React)。在这种情况下,您可以放心地这样做:
const x: Fake.Property // GOOD: Fake acts as a namespace
Fact.Function // GOOD: Fake acts a concrete type that contains Function
另一方面,我的库没有导出为名称空间(如Redux),并导致了以下情况:
const x: Fake.Property // FAIL: Fake is not a namespace
Fact.Function // GOOD: Fake acts a concrete type that contains Function
要避免此问题,您可以在本质上全局扩展库,将其视为名称空间导出,如下所示:
修改您的tsconfig.json以添加新的hacks
"compilerOptions": {
...
},
"include": [
"./src/**/*",
"./types/**/*"
]
并添加一个包含以下内容的types/fake.d.ts
文件
import * as Fake from 'fake-library'
export as namespace Fake
export = Fake
现在完成这些更改后,全局const声明将正常工作。