如何让webpack和babel处理私人 typescript 关键字?

krcsximq  于 2022-12-29  发布在  Webpack
关注(0)|答案(2)|浏览(159)

我有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';
    |             ^
t98cgbkg

t98cgbkg1#

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

  • 版本1.1.1,适用于版本2.7
  • 版本1.1.0,适用于小于2.7的Vue
vybvopom

vybvopom2#

改变文件所在的目录对编译方式有一定影响。我不完全确定如何或为什么会有影响。出现问题的文件位于比指向它的基本webpack. config低两级的目录分支上。而webpack.config之上的文件允许private typescript关键字,该目录级别下的文件不允许使用private关键字。
也许由于某种原因,较低的目录级别被读取为经典的javascript,尽管文件扩展名是?
默认情况下,babel/webpack安装程序的最新版本应该允许使用privatereadonly关键字进行Typescript编译。尽管babel曾经在使用这些关键字时遇到过问题。如果遇到问题,请考虑尝试使用目录结构。我猜想,即使编译是从配置文件所在的位置开始的,具有更多专业知识的人也能够告诉我为什么目录级别很重要。

相关问题