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

Question

我正在编写一个导出对象的 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"]
}

Answer 1

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

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

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

Answer 2

我尝试使用 with browserify，但由于 browserify 添加到导出文件的所有额外代码，遇到了难以调试的问题。我接受这个答案，因为它是复杂代码库的正确答案。

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

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

Export TS to support ES6, CommonJS, and HTML <script> tag

javascript

commonjs

typescript