代码之家  ›  专栏  ›  技术社区  ›  Mark Rogers

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

  •  -1
  • Mark Rogers  · 技术社区  · 4 年前

    private Typescript中的关键字。一般来说,他们对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';
        |             ^
    
    0 回复  |  直到 4 年前
        1
  •  -1
  •   jonrsharpe The6thSense    4 年前

    更改文件所在的目录会影响文件的编译方式。我不太清楚这是如何或为什么会产生影响。有问题的文件位于比指向它的基本webpack config低两层的目录分支上。当文件在网页包.config允许 private typescript关键字,该目录级别下的文件不允许 关键字。

    默认情况下,最新版本的babel/webpack安装程序应允许使用 私有的 readonly