javascript - @babel/typescript 在 webpack 构建时不会抛出错误
问题描述
我正在尝试使用 Babel 7 的 @babel/typescript 预设转译 TypeScript。它工作正常,但由于某种原因,构建控制台中没有来自 TS 的任何错误消息。
我有下一个配置:
webpack.config.js
const outputPath = require('path').resolve(__dirname, './production');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'./src/index.tsx'
],
output: {
path: outputPath,
filename: '[name].[chunkhash].js',
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'source-map-loader',
enforce: "pre"
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader'
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
],
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx']
},
devServer: {
contentBase: outputPath
}
};
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/typescript",
"@babel/preset-react"
],
"plugins": [
"react-hot-loader/babel",
"@babel/plugin-transform-runtime",
]
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"jsx": "react",
"outDir": "./production/",
"sourceMap": true,
"noImplicitAny": true,
"lib": ["esnext", "dom"]
},
"include": [
"./src/**/*"
]
}
输出是:
ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /Users/me/projects/react/production
ℹ 「wdm」: Hash: 1186927fe343142edc70
Version: webpack 4.29.3
Time: 1120ms
Built at: 2019-02-13 19:41:10
Asset Size Chunks Chunk Names
index.html 433 bytes [emitted]
main.3bb79f4b9e2925734f50.js 1.64 MiB main [emitted] main
Entrypoint main = main.3bb79f4b9e2925734f50.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.tsx 40 bytes {main} [built]
...
ℹ 「wdm」: Compiled successfully.
它说没有任何错误。但是代码中有TS错误。
如果我将 babel-loader 更改为 ts-loader,我将拥有:
ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /Users/me/projects/react/production
✖ 「wdm」: Hash: 90ec6ae13f842d672d2d
Version: webpack 4.29.3
Time: 1941ms
Built at: 2019-02-13 19:42:35
Asset Size Chunks Chunk Names
index.html 433 bytes [emitted]
main.90f2073400581ecd9e5b.js 1.59 MiB main [emitted] main
Entrypoint main = main.90f2073400581ecd9e5b.js
...
ERROR in /Users/me/projects/react/src/actions/index.ts
./src/actions/index.ts
[tsl] ERROR in /Users/me/projects/react/src/actions/index.ts(3,28)
TS7006: Parameter 'type' implicitly has an 'any' type.
ERROR in /Users/me/projects/react/src/actions/index.ts
./src/actions/index.ts
[tsl] ERROR in /Users/me/projects/react/src/actions/index.ts(3,34)
TS7019: Rest parameter 'argNames' implicitly has an 'any[]' type.
...
ℹ 「wdm」: Failed to compile.
因此, ts-loader 显示错误。
如何为@babel/typescript 启用错误抛出?
解决方案
据我了解,Babel 团队在开发时禁用了类型检查:
https://iamturns.com/typescript-babel
Babel 如何处理 TypeScript 代码?它删除它。
是的,它去掉了所有的 TypeScript,把它变成了“常规”的 JavaScript,并继续它的快乐方式。
但是有一个解决方法fork-ts-checker-webpack-plugin
只需将其安装为依赖项
npm install --save-dev fork-ts-checker-webpack-plugin
并更新你的 webpack 配置:
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const webpackConfig = {
...
plugins: [
new ForkTsCheckerWebpackPlugin()
]
};
之后,您将在单独的进程中运行静态类型检查,这非常棒,因为它可以显着加快您的构建速度。
推荐阅读
- javascript - 将最后一个下拉列表从 3 个下拉列表更改后,所有 3 个下拉列表的副本完全没有第一个下拉列表值
- php - php iframe 到 amp-youtube
- android - 从共享首选项中检索 Arraylist
- java - java中的日历顺序
- system.reactive - 重播主题订阅行为
- c++ - 为什么我使用此背包问题解决程序会收到“未知信号 11”?
- virtual-machine - 如何在virtualbox中将包加载到openwrt
- c# - 将二进制文件字节数组发送到 web api 方法
- spring - 到 JSON 的 SolrDocumentList 忽略了 solrj 响应中的 numFound 属性
- javascript - 为什么嵌套对象不通过引用传递?