我有webpack和babel编译 typescript ,但他们似乎不知道如何处理 typescript 中的private
关键字。他们似乎没有问题, typescript 一般,我能够编译文件。所以我想知道我是否需要做一些配置更改,但谷歌是没有帮助的。
如何让webpack和babel对Typescript的private关键字表现良好?.babelrc
:
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-transform-typescript",
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread"
]
}
一米二米一
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
编辑:有一个复制细节的请求,我认为这个很容易用我提供的来复制。我以前见过它,它与babel-loader对typescript的准支持有关。创建一个类并添加一个私有字段。private whatever: string
。这应该足以使unrecognized token
错误在我提供的配置中出现。
根据要求编辑2:package.json
:
{
"name": "blah",
"version": "1.0.0",
"description": "blah config",
"main": "index.js",
"scripts": {
"bundle": "webpack",
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"check-types": "tsc"
},
"devDependencies": {
"@babel/core": "^7.11.1",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-object-rest-spread": "^7.11.0",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^4.2.1",
"html-webpack-plugin": "^4.3.0",
"style-loader": "^1.2.1",
"tslint": "^6.1.3",
"tslint-immutable": "^6.0.1",
"typescript": "^3.9.7",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"@types/react": "^16.9.46",
"@types/react-dom": "^16.9.8",
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
失效示例:
class Example {
private anyField = 'danger';
}
错误消息示例:
SyntaxError [path] Unexpected token (2:12)
1 | class Example {
> 2 | private anyField = 'danger';
| ^
2条答案
按热度按时间t98cgbkg1#
也许你需要babel-preset-typescript-vue
vybvopom2#
改变文件所在的目录对编译方式有一定影响。我不完全确定如何或为什么会有影响。出现问题的文件位于比指向它的基本webpack. config低两级的目录分支上。而webpack.config之上的文件允许
private
typescript关键字,该目录级别下的文件不允许使用private
关键字。也许由于某种原因,较低的目录级别被读取为经典的javascript,尽管文件扩展名是?
默认情况下,babel/webpack安装程序的最新版本应该允许使用
private
和readonly
关键字进行Typescript编译。尽管babel曾经在使用这些关键字时遇到过问题。如果遇到问题,请考虑尝试使用目录结构。我猜想,即使编译是从配置文件所在的位置开始的,具有更多专业知识的人也能够告诉我为什么目录级别很重要。