当我将装饰器与 gas-webpack-plugin 一起使用时,转译 JavaScript 代码失败

Transpiled JavaScript code fails when I use decorator with gas-webpack-plugin

EDIT1:我制作了一个最小复制存储库here
存储库中提供了代码和复制步骤。
EDIT2:当我将转译后的代码嵌入 html 文件时发生同样的错误。

EDIT3:我找到了这个问题的主要原因。
当我使用 gas-webpack-plugin 时,输出文件会出现此错误。简单地删除插件解决了问题,但是我无法在 GAS 上访问我的主要功能。
我创建了一个 github issue on the official gas-webpack-plugin 。希望有解决方法。

---来自这里的原始问题---

我正在使用 Clasp + Typescript + Webpack + Babel 在本地使用 npm 库开发 GAS。
在我的项目中使用装饰器之前,它工作正常。但是,使用装饰器(更准确地说,class-验证器)会导致 GAS 出现以下错误...

TypeError: (0 , _metadata_MetadataStorage__WEBPACK_IMPORTED_MODULE_1__.getMetadataStorage)(...).addConstraintMetadata is not a function(line 482, file "index")

有谁知道如何避免上述错误?

这是示例代码和配置。

// index.ts

import { IsOptional, IsString } from 'class-validator';

declare const global: {
  [x: string]: any;
};

class Foo {
  @IsOptional()
  @IsString()
  foo: string;
}

// ENTRYPOINT
global.main = function (e: any) {
  console.log('Hello World!');
  const hoge = new Foo();
};

// .babelrc (with babel-loader v8.2.3)
{
  "presets": ["@babel/preset-typescript"],
  "plugins": [
    ["@babel/plugin-proposal-optional-chaining"],
    ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}
// tsconfig.json (with TypeScript v4.1.3)
{
  "compilerOptions": {
    "lib": ["es5"], // changing this to es6 or esnext doesn't fix the problem
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

我和 gas-webpack-plugin 的作者谈过。 https://github.com/fossamagna/gas-webpack-plugin/issues/685

使用装饰器时,gas-webpack-plugin 不仅 main() 还将 classValidatorMetadataStorage() 公开到顶层。 通过简单地从转译文件中删除它,我能够 运行 带有装饰器的代码。

但我们现在不必手动执行此操作。作者已经处理了这种情况。 从 gas-webpack-plugin@2.2.0 开始,它有 include 选项来避免不必要的功能暴露。

用法:

new GasPlugin({
  // Only functions written here is moved to the top level.
  include: ["src/**/*.ts"]
})