如何防止 TypeScript 中断 Webpack 在 Webpack 的 ProvidePlugin 上声明的未解析变量上的构建？

Question

是否有一种方法可以防止WebPack的构建过程失败，因为Typescript编译器开始在WebPack的SupplyPlugin配置上实际上已配置的未解决变量大喊大叫？

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

根据我的经验，Typescript不知道将将哪些变量注入模块中，结果构建未完成。

这是构建的输出

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 '$'.

Answer 1

我对AHz的答案不完全满意，因为我不喜欢在全球安装键入或声明jQuery为any丢失所有TypeChecking。

对我有用的解决方案是创建 global.d.t.ts 使用以下内容：

import * as _jQuery from 'jquery';
declare global {
  const jQuery: typeof _jQuery;
  const $: typeof _jQuery;
}

之后，tsc通过没有任何警告（例如Cannot find name '$'.）。

在这里找到。

Answer 2

如果我正确理解SupplyPlugin，您仍然需要将jQuery和强调为模块（外部或别名）。

因此，我建议将这些模块加载到打字稿中：

import * as $ from 'jquery';
import * as _ from 'underscore';

然后，您只需要为这些库提供定义（.D.TS）。我建议为此目的打字。

typings install jquery --global
typings install underscore --global

我假设您正在使用TS-LOADER，该ts-Loader会自动处理该载荷。

如果要避免import语句

或者您可以创建自己的简化声明：

declare var jQuery: any;
declare var $: any;

Answer 3

我会说有一些例外，这是解决方案的方法。我使用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声明将正常工作。

Answer 4

不要用ts-loader（删除此！）在Babel 7上使用babel-loader！我希望这将节省某人将来进行调试！参考