导出 TS 以支持 ES6、CommonJS 和 HTML <script> 标签答案

【问题标题】：Export TS to support ES6, CommonJS, and HTML <script> tag导出 TS 以支持 ES6、CommonJS 和 HTML <script> 标签
【发布时间】：2021-11-20 23:35:06
【问题描述】：

我正在编写一个导出对象的 TS 库，如下所示：

export const MyLibName: SDKExport = { ... }

这个库将在 npm 上分发，我希望其他人能够导入它，而不管他们的设置如何，即它应该能够以下列方式使用：

// ES6
import { MyLibName } from './myLib';

// CommonJS
const { MyLibName } = require('./myLib');

// Browser
<script src="https://cdn.jsdelivr.net/npm/myLib/dist/dist.min.js"></script>
<script console.log(MyLibName) </script>

浏览器部分被证明是最棘手的，因为它需要使用MyLibName 对象“污染”全局命名空间。我可以这样做，但我不清楚如何在使用 CommonJS/ES6 显式导入库时不污染全局命名空间。

这是我的 tsconfig.json：

{
  "compilerOptions": {
    "lib": ["ES2019"],
    "module": "es6",
    "target": "es5",
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "sourceMap": true,
    "outDir": "build",
    "strict": true,
    "noImplicitAny": true,
  },
  "include": ["./**/*.ts"],
  "exclude": ["node_modules", ".vscode", "test"]
}

【问题讨论】：

标签： javascript typescript commonjs

【解决方案1】：

很明显，如果您希望一个脚本污染全局命名空间而不是另一个，那么您在浏览器中导入的脚本必须与您的 CommonJS/ES6 导入不同。只需创建一个像这样的文件并在其上使用您的捆绑程序来创建您的库的“浏览器构建”：

import { MyLibName } from './myLib';
window.MyLibName = MyLibName;

（您的项目中似乎已经有一个捆绑器/压缩器，所以我不会详细介绍如何设置它们。）

【讨论】：

【解决方案2】：

我尝试将approach suggested by Vojtěch Strnad 与browserify 一起使用，但由于browserify 添加到导出文件的所有额外代码，遇到了难以调试的问题。我接受这个答案，因为它是复杂代码库的正确答案。

对于我自己的项目，它只包含一个文件，我发现使用 "module": "ES6" TS 编译器选项导出 TS 代码并运行 sed -i 's/\export //g' dist/index.js 以删除 export 关键字效果很好。这样，导出的文件就只有const MyLibName = { ... }，从而将对象添加到全局命名空间中。

【讨论】：