为导入和 window 使用编译导出

Question

如何在打字稿中创建既可以从另一个模块导入又可以与 <script src=""/> 一起使用的文件。例如：

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()
}

我尝试了什么：

我无法在 .ts 个文件中的 if 中使用导出
我无法定义变量导出并使用自定义 if。
我在 tsconfig.json 中尝试了不同的 module:

我还以为我可以创建 2 次 tsconfig 和运行 tsc 2 次。但是当我的 index.ts 包含 export 时，如果没有一些导出方法，我无法生成 js 文件。例如。使用 "module"="none" 它仍然会生成

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

然后我得到

exports is not defined

我看到 atm 的唯一方法是添加 webpack 并创建一个单独的文件 main.js，其中包含导入语句和 window 赋值。但是与库大小相比，它有很多开销代码。

Answer 1

您可以尝试 rollup 和 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}({});

为导入和 window 使用编译导出

Compile export for import and window use

typescript

tsconfig