Webpack未因TypeScript错误而失败

k5hmc34c  于 2022-11-13  发布在  Webpack
关注(0)|答案(3)|浏览(158)

由于我升级到了版本5,webpack不会因TypeScript错误而失败。
下面是我的场景:

index.ts(入口点):

const message: string = "Hello World";
console.log(message);
  • 我跑./node_modules/.bin/webpack --config webpack.config.js --watch
  • 一切正常。以下是webpack的输出:
[webpack-cli] Compilation starting...
[webpack-cli] Compilation finished
asset index.js 50 bytes [compared for emit] [minimized] (name: main)
./src/index.ts 65 bytes [built] [code generated]
webpack 5.0.0 compiled successfully in 1251 ms
[webpack-cli] watching files for updates...
[webpack-cli] Compilation starting...
[webpack-cli] Compilation finished
asset index.js 50 bytes [emitted] [minimized] (name: main)
./src/index.ts 65 bytes [built] [code generated]
webpack 5.0.0 compiled successfully in 152 ms
[webpack-cli] watching files for updates...
  • 在下一个步骤中,我添加了一个代码片段,它应该会导致一个TypeScript错误:
const message: number = "Hello World"; // <= Type 'string' is not assignable to type 'number'.ts(2322)
console.log(message);
  • 我预计webpack监视进程会失败或显示一些错误,但它没有失败。下面是webpack的输出:
[webpack-cli] Compilation starting...
[webpack-cli] Compilation finished
asset index.js 50 bytes [emitted] [minimized] (name: main)
./src/index.ts 65 bytes [built] [code generated]
webpack 5.0.0 compiled successfully in 244 ms
[webpack-cli] watching files for updates...

有趣的是,只有在启动webpack监视进程后更改index.ts时才会发生这种情况。如果运行webpack时不使用--watch选项,则会得到以下输出,并且不会创建捆绑文件(如预期):

[webpack-cli] Compilation finished
assets by status 50 bytes [cached] 1 asset
./src/index.ts 65 bytes [built] [code generated] [1 error]

ERROR in /Users/oliverschwendener/projects/test/src/index.ts
./src/index.ts
[tsl] ERROR in /Users/oliverschwendener/projects/test/src/index.ts(1,7)
      TS2322: Type 'string' is not assignable to type 'number'.

webpack.配置.js

const path = require('path');

const config = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ],
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'bundle'),
    },
};

module.exports = config;
  • 编辑:这是我tsconfig.json
{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "lib": ["dom", "es2017"],
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "moduleResolution": "node"
  }
}

我无法想象这是webpack、webpack-cli或ts-loader中的bug。所以我猜我的配置有问题。有人能告诉我这里出了什么问题吗?谢谢!

  • webpack 5.3.1(webpack版本4.44.2运行正常)
  • 网络包-客户端4.1.0
  • ts加载程序8.0.7
  • 打字稿4.0.5
6qfn3psc

6qfn3psc1#

tsconfig.json中,您可以将noEmitOnError设置为true,以确保在遇到错误时中断进程:

{
    "compilerOptions": {
        "noEmitOnError": true,

(如果没有显式设置,则默认为false

zpf6vheq

zpf6vheq3#

在我的例子中,webpack v5.74.0没有输出错误的typescript语法,因为安装程序中缺少一个包:fork-ts-checker-webpack-plugin(npm link)(单位:千美元)
安装并设置后,我终于可以看到webpack编译时的typescript错误。

相关问题