javascript - Typescript Webpack 模块解析仅在运行时失败

Question

我正在尝试在现有的 Typescript 项目上从 grunt 迁移到 Webpack。即使我无法使用正确的 import 语句导入依赖项，webpack 构建也会成功。

tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "sourceMap": true,
        "module": "commonjs",
        "allowJs": true
    },
    "files": [
        "client/Index.ts"
    ],
    "exclude": [
        "node_modules"
    ],
    "types": []
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: './client/Index.ts',
    resolve: {
        extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public', 'js')
    }
}

client/Index.ts

//import * as $ from "jquery";
$(() => {
    $(".title").html("Jquery works");
});

package.json 中的相关依赖项

...
  "dependencies": {
    "@types/jquery": "^2.0.45",
    "jquery": "^3.2.1",
    "ts-loader": "^2.1.0",
    "typescript": "^2.3.3",
    "webpack": "^2.6.1"
}
...

即使 import 语句被注释掉，webpack 构建也能顺利完成 - 我猜是因为它能够隐式找到 jQuery 类型文件。在运行时，我收到错误 Uncaught ReferenceError: $ is not Defined。这是有道理的，因为 webpack 没有捆绑 ./~/jquery/dist/jquery.js。如果我取消注释 Index.ts 中的导入，则该模块捆绑的应用程序运行良好。所以我的问题是，如果我没有导入引用的模块，如何让 Webpack 在构建时失败？

谢谢!

Answer 1

Typescript 编译器通过查找 node_modules 来使用其隐式类型解析，因此尽管 webpack 不包含实际的 js 库，除非您使用 import，它仍然可以编译。可以通过设置compilerOptions.types: []来禁用此默认的Typescript行为。

发布的代码包含错误:tsconfig.json的"types": []位于错误的位置。空类型数组属于 compilerOptions.types:

{
    "compilerOptions": {
        "target": "ES5",
        "sourceMap": true,
        "module": "commonjs",
        "allowJs": true,
        "types": []
    },
    "files": [
        "index.ts"
    ],
    "exclude": [
        "node_modules/*"
    ]
}

使用此 tsconfig，webpack 按预期失败:
./client/Index.ts 中出现错误
(2,1):错误 TS2304:找不到名称“$”。