问题描述
我只是想使用webpack5和webpack-cli启动一个新的打字稿项目。令我惊讶的是,我遇到了这些错误:
错误:
hha@melchia ~/projects/project $ npm run build
> my-webpack-project@1.0.0 build /home/hha/projects/project
> webpack
99% done plugins watchInfo[webpack-cli] Compilation finished
asset main.js 4.7 KiB [compared for emit] (name: main)
runtime modules 668 bytes 3 modules
./src/index.ts 616 bytes [built] [code generated]
ERROR in /home/hha/projects/project/node_modules/webpack/lib/javascript/JavascriptParser.js
[tsl] ERROR in /home/hha/projects/project/node_modules/webpack/lib/javascript/JavascriptParser.js(3272,7)
TS2578: Unused '@ts-expect-error' directive.
ERROR in /home/hha/projects/project/node_modules/webpack/lib/Progressplugin.js
[tsl] ERROR in /home/hha/projects/project/node_modules/webpack/lib/Progressplugin.js(392,4)
TS2578: Unused '@ts-expect-error' directive.
ERROR in /home/hha/projects/project/node_modules/webpack/lib/optimize/ConcatenatedModule.js
[tsl] ERROR in /home/hha/projects/project/node_modules/webpack/lib/optimize/ConcatenatedModule.js(1470,6)
TS2578: Unused '@ts-expect-error' directive.
ERROR in /home/hha/projects/project/node_modules/webpack/lib/util/semver.js
[tsl] ERROR in /home/hha/projects/project/node_modules/webpack/lib/util/semver.js(43,2)
TS2578: Unused '@ts-expect-error' directive.
ERROR in /home/hha/projects/project/node_modules/webpack/lib/util/semver.js
[tsl] ERROR in /home/hha/projects/project/node_modules/webpack/lib/util/semver.js(45,2)
TS2578: Unused '@ts-expect-error' directive.
ERROR in /home/hha/projects/project/node_modules/webpack/lib/util/semver.js
[tsl] ERROR in /home/hha/projects/project/node_modules/webpack/lib/util/semver.js(282,3)
TS2578: Unused '@ts-expect-error' directive.
ERROR in /home/hha/projects/project/node_modules/webpack/lib/util/registerExternalSerializer.js
[tsl] ERROR in /home/hha/projects/project/node_modules/webpack/lib/util/registerExternalSerializer.js(302,4)
TS2578: Unused '@ts-expect-error' directive.
ERROR in /home/hha/projects/project/node_modules/webpack/lib/stats/StatsFactory.js
[tsl] ERROR in /home/hha/projects/project/node_modules/webpack/lib/stats/StatsFactory.js(146,6)
TS2578: Unused '@ts-expect-error' directive.
ERROR in /home/hha/projects/project/node_modules/webpack/lib/stats/StatsFactory.js
[tsl] ERROR in /home/hha/projects/project/node_modules/webpack/lib/stats/StatsFactory.js(193,6)
TS2578: Unused '@ts-expect-error' directive.
ERROR in /home/hha/projects/project/node_modules/webpack/lib/WebpackOptionsApply.js
[tsl] ERROR in /home/hha/projects/project/node_modules/webpack/lib/WebpackOptionsApply.js(520,6)
TS2578: Unused '@ts-expect-error' directive.
ERROR in /home/hha/projects/project/node_modules/jest-worker/build/index.js
[tsl] ERROR in /home/hha/projects/project/node_modules/jest-worker/build/index.js(55,7)
TS2578: Unused '@ts-expect-error' directive.
ERROR in /home/hha/projects/project/node_modules/jest-worker/build/index.js
[tsl] ERROR in /home/hha/projects/project/node_modules/jest-worker/build/index.js(145,7)
TS2578: Unused '@ts-expect-error' directive.
ERROR in /home/hha/projects/project/node_modules/jest-worker/build/index.js
[tsl] ERROR in /home/hha/projects/project/node_modules/jest-worker/build/index.js(171,9)
TS2578: Unused '@ts-expect-error' directive.
ERROR in /home/hha/projects/project/node_modules/webpack/lib/config/normalization.js
[tsl] ERROR in /home/hha/projects/project/node_modules/webpack/lib/config/normalization.js(127,6)
TS2578: Unused '@ts-expect-error' directive.
ERROR in /home/hha/projects/project/node_modules/webpack/lib/node/nodeConsole.js
[tsl] ERROR in /home/hha/projects/project/node_modules/webpack/lib/node/nodeConsole.js(56,3)
TS2578: Unused '@ts-expect-error' directive.
Webpack.config.js:
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'development',entry: './src/index.ts',plugins: [new webpack.Progressplugin()],module: {
rules: [{
test: /\.(ts|tsx)$/,loader: 'ts-loader',include: [path.resolve(__dirname,'src')],exclude: [/node_modules/]
}]
},resolve: {
extensions: ['.tsx','.ts','.js']
}
}
Tsconfig.json:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,"noImplicitAny": true,"module": "es6","target": "es5","allowJs": true,"skipLibCheck": true
},"exclude": [
"node_modules"
]
}
Webpack信息:
System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
Binaries:
Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.1/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v12.18.1/bin/npm
browsers:
Chrome: 86.0.4240.111
Firefox: 82.0
Packages:
terser-webpack-plugin: ^5.0.3 => 5.0.3
webpack: ^5.3.2 => 5.3.2
webpack-cli: ^4.1.0 => 4.1.0
Global Packages:
webpack-cli: 4.1.0
webpack: 5.3.2
解决方法
因此,事实证明我不得不更改tsconfig
选项include
来指定打字稿将分析的目录。
根据documentation on include option,默认值为:
[]如果指定了文件,否则为[“ ** / *”]
因此,默认行为是分析所有存储库,包括node_modules
。
解决方案:
总而言之,只需编辑include属性即可仅包含src文件夹:
{
"include": ["src/**/*"]
}