gulp / rollup / typescript — __decorate 未定义

Question

我有这个gulpfile.js

import gulp from 'gulp';
import { rollup } from 'rollup';
import rollupTypescript from '@rollup/plugin-typescript'

const compileTs = async (src, dest) => {
  const bundle = await rollup({
    input: src,
    plugins: [
      rollupTypescript()
    ]
  });

  await bundle.write({
    file: dest,
    format: 'es',
    name: 'library',
    sourcemap: 'inline'
  });
}

export const ts = async _ => await Promise.all([
    compileTs('./src/ts/main.ts', './bin/js/bin.js')
  ]);

在tsconfig.json（同一目录）内我有：

compilerOptions: {
  "target": "ESNEXT",
  "module": "ESNext",
  "importHelpers": true, 
  "experimentalDecorators": true
}

src/ts/main.ts 内有：

const Foo = (fx: Function) => {
  console.log(fx);
}

@Foo
class Bar {

}

$ npx gulp ts 创建所需的文件。但是当我运行它时，控制台会告诉我：

Uncaught ReferenceError: __decorate is not defined

因为不包括来自tslib 的所有助手。

我能做些什么来解决这个问题？我尝试使用external: ['tslib']，但没有成功。

顺便说一句： 仅运行 npx tsc（加上 outdir 集）包括 __decorate

Answer 1

我以前也遇到过完全相同的情况。问题很可能是importHelper 选项被排除在https://github.com/rollup/plugins/tree/master/packages/typescript#ignored-options 之外。

我确实通过切换到使用 rollup-plugin-typescript2 来解决问题，默认情况下启用此选项。

// Install `npm i -D rollup-plugin-typescript2`
import typescript from 'rollup-plugin-typescript2';