当我将装饰器与 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"]
})
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"]
})