gulp / 汇总 / typescript — __decorate 未定义

Question

I have this 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')
  ]);

within tsconfig.json (same directory) I have:

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

within src/ts/main.ts there is:

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

@Foo
class Bar {

}

$ npx gulp ts creates the desired file. But when I run it the console tells me:

Uncaught ReferenceError: __decorate is not defined

Since all the helpers from tslib are not included.

What can I do to fix that? I have tried to use external: ['tslib'] , but no luck.

BTW: Just running npx tsc (plus the outdir set) includes __decorate

Answer 1

I've run exactly the same situation before. The issue is likely the option importHelper is excluded https://github.com/rollup/plugins/tree/master/packages/typescript#ignored-options .

I did resolve by switching to use rollup-plugin-typescript2 which enables this option by default.

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