【发布时间】：2020-08-16 20:32:47
【问题描述】：
我有 webpack 和 babel 编译打字稿，但他们似乎不知道如何处理打字稿中的 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"
]
}
webpack.config.js:
...
{
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';
| ^
【问题讨论】：
-
为什么要避免对 .ts 文件使用 typescript 加载器？
-
@RazRonen - 过去我已经让它与 babel-loader 一起工作，我遵循了一个与 typescript 一起工作的设置教程。我只是没有让私人领域工作。我希望它在 typescript 和 javascript 之间具有更好的互操作性。但是，是的，如果 ts-loader 可以处理私有字段，也许会更好。
-
awesome-typescript-loader 在我看来将是直接简单的解决方案。顺便说一句，这似乎是一个真正的合法问题......不知道为什么有人会投票。
-
不管有多少，你能把它放在问题中吗？拥有实际错误会使其他有类似问题的人更容易发现这一点。 React 在这里如何相关，哪个脚本实际上失败了？你为什么要描述一个类而不是仅仅提供它呢？这是101东西，请树立一个更好的榜样。
标签： typescript webpack babeljs