如何使webpack和babel处理私有的typescript关键字？

如何解决如何使webpack和babel处理私有的typescript关键字？

我有webpack和babel编译打字稿，但是他们似乎不知道如何处理打字稿中的private关键字。他们似乎一般来说Typescript都没问题，我能够编译文件。因此，我想知道是否需要进行一些配置更改，但是谷歌搜索没有帮助。

您如何使Webpack和Babel与Typescript的专用关键字搭配得很好？

.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';
    |             ^

解决方法

更改文件所在的目录对其编译方式有一些影响。我不完全确定这会如何或为什么产生影响。遇到问题的文件位于目录分支上，该分支比指向它的基本webpack配置低两级。虽然webpack.config之上的文件允许使用private打字稿关键字，但该目录级别以下的文件不允许使用private关键字。

尽管文件扩展名由于某种原因而可能将较低的目录级别读取为经典javascript？

默认情况下，最新版本的babel / webpack设置应允许同时使用private和readonly关键字进行Typescript编译。尽管有一段时间babel在使用这些关键字时遇到了麻烦。如果您遇到麻烦，请考虑尝试使用目录结构。我猜想，即使编译从配置文件所在的位置开始，具有更多专业知识的人也可能会告诉我为什么目录级别很重要。