Скомпилируйте экспорт для импорта и использования окон

Question

Как создать в машинописном файле файл, который можно импортировать из другого модуля и использовать с <script src=""/>. E.g.:

index.ts

export class A {

   echo() {
     console.log('a');
   }
}

tsconfig.json

{
  "compilerOptions": {
    "lib": ["es2017", "dom"],
    "target": "es5",
    "module": "commonjs",
  },
}

Как мне сгенерировать вывод следующим образом:

class A { 
   echo() {
      console.log('a');
   }
}
if (typeof exports !== 'undefined) {
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.A = A;
// don't expose to global scope if module is imported via webpack or etc
} else if (typeof window !== 'undefined') {
    window.A = A
}

Также я хочу, чтобы мой компилятор генерировал index.d.ts с:

export declare class A {
   echo()
}

Что я попробовал:

• Я не могу использовать экспорт внутри if в .ts файлах
• Я не могу определить переменные экспорта и использовать пользовательские, если.
• Я пробовал разные module в tsconfig.json:

Я также думал, что смогу создать 2 tsconfig и запустить tsc 2 раза. Но я не могу сгенерировать файл js без какого-либо метода экспорта, когда мой index.ts содержит export. Например. с "module"="none" он все еще генерирует

 Object.defineProperty(exports, "__esModule", { value: true });` 

и я получаю

exports is not defined

Единственный способ увидеть atm - добавить веб-пакет и создать отдельный файл main.js с оператором импорта и назначением window. Но он имеет много служебного кода по сравнению с размером библиотеки.

Answer 1

Вы можете попробовать накопительный в режиме iife:

$ npm i rollup typescript rollup-plugin-typescript rollup-plugin-uglify
$ ./node_modules/.bin/rollup -c rollup.config.js

rollup.config.js :

import typescript from 'rollup-plugin-typescript';
import { uglify } from "rollup-plugin-uglify";

export default {
    input: './index.ts',
    output: {file: './browser.js', format: 'iife', name: 'myBundle'},
    plugins: [
        typescript(),
        uglify()
    ]
}

index.ts :

// index.ts
export class A {
  echo() {
    console.log("a");
  }
}

вывод browser.js :

var myBundle=function(o){"use strict";var n=(t.prototype.echo=function(){console.log("a")},t);function t(){}return o.A=n,o}({});