如何获取 webpack 和 babel 来处理 private typescript 关键字？

Question

我有 webpack 和 babel 编译 typescript 但他们似乎不知道如何处理 Typescript 中的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有关，新建一个class，添加私有字段。 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';
    |             ^

Answer 1

也许你需要babel-preset-typescript-vue

• Vue@2.7 版本 1.1.1
• Vue@<2.7 版本 1.1.0

Answer 2

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

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

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