js class 语法在 node_modules 库中不起作用

Question

如果文件是在库中导入的，我会看到这个错误，但是如果你在项目中使用相同的脚本，那么一切都很好。我已经尝试过 maxNodeModuleJsDepth = 1，但这不起作用。

错误文本：

Uncaught Error: Module parse failed: Unexpected token (5:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default class NcaLayer
| {
>     socket;
| 
|     constructor(url)
    at eval (webpack-internal:///./node_modules/@dogovor24/dogovor24-components/helpers/nca-layer/NcaLayer.js:1)
    at Object../node_modules/@dogovor24/dogovor24-components/helpers/nca-layer/NcaLayer.js (app.js:2627)
    at __webpack_require__ (app.js:833)
    at fn (app.js:130)
    at eval (webpack-internal:///./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js?!./node_modules/@dogovor24/dogovor24-components/auth/components/signCompany.vue?vue&type=script&lang=ts&:3)
    at Module../node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js?!./node_modules/@dogovor24/dogovor24-components/auth/components/signCompany.vue?vue&type=script&lang=ts& (app.js:5387)
    at __webpack_require__ (app.js:833)
    at fn (app.js:130)
    at eval (webpack-internal:///./node_modules/@dogovor24/dogovor24-components/auth/components/signCompany.vue?vue&type=script&lang=ts&:2)
    at Module../node_modules/@dogovor24/dogovor24-components/auth/components/signCompany.vue?vue&type=script&lang=ts& (app.js:1945)
webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:8428

NcaLayer.js:

import NcaLayerWebSocket from "@dogovor24/dogovor24-components/helpers/nca-layer/NcaLayerWebSocket.js";

export default class NcaLayer
{
    socket;

    constructor(url)
    {
        this.socket = new NcaLayerWebSocket(url);
    }
    
    signXml(storageName, keyType, xmlToSign, process)
    {
        this.socket.process = process;
        this.socket.send(JSON.stringify({
            "module": "kz.gov.pki.knca.commonUtils",
            "method": "signXml",
            "args": [storageName, keyType, xmlToSign, "", ""]
        }));
    }
}

这是我在项目中的 tsconfig 文件

{
  "compilerOptions": {
    "allowJs": true,
    "target": "esnext",
    "module": "esnext",
    "strict": false,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strictPropertyInitialization": false,
    "strictNullChecks":false,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "mocha",
      "chai"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

和tsconfig.json在我的节点模块包中

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "experimentalDecorators": true,
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "./*"
      ],
      "~/*": [
        "./*"
      ]
    },
    "removeComments": true,
    "strictNullChecks": true,
    "target": "esnext",
    "strict": false,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "noEmit": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true
  },
}

Answer 1

请注意，错误在 .js 文件中（您允许 JavaScript 在您的 tsconfig.json 中）。您正在使用 class fields，它还不是 JavaScript 的一部分；特别是 public class 字段。（TypeScript 有 public class 字段，但 JavaScript 还 [不完全]。）显然你的环境还不支持 public class 字段，或者您的捆绑器不希望看到它们。

解决它的选项：

根据显示的代码，您可以删除 socket; 字段定义。您正在分配给构造函数中的字段，它将创建它。
或者，将文件转换为 TypeScript。
或者，配置您的捆绑器 and/or Babel 以使用 class 字段将您的 JavaScript 转换为不使用 [=33] 的 JavaScript =] 字段（ES2020 或更早版本；我怀疑至少 public class 字段将在 ES2021 中）。

js class 语法在 node_modules 库中不起作用

js class syntax not working in node_modules library

javascript

tsconfig

webpack

vue.js

babeljs