如何为用户构建高兼容性的 Typescript 库？

Question

我想做什么

我想创建一个可用作 JS 开发人员和 Typescript 开发人员（前端，无 nodejs）的库。这意味着 JS 开发者可以将该库用作内联脚本：<script type="text/javascript" src="mylib.js">var myLib = new MyLib();</script>，Typescript 开发者可以通过导入使用该库。

我需要什么

我想在 Typescript 中开发这个库，这就是为什么我需要一个满足以下要求的（构建）解决方案：

1. 该库应使用 Typescript 开发。
2. 构建应该自动包含所有声明。 Typescript 开发人员应该能够导入此库的部分内容。
3. 对于 Javascript 用户，该库应使用“老式方式”作为 <script>-Tag 中的内联代码
4. 如果调用npm run build，则应自动生成构建。
5. 一般而言，该库与旧版浏览器的兼容性应尽可能高。

到目前为止我尝试了什么

• 我创建了一个 typescript 库并尝试了 tsconfig.json 中的一些设置。我发现的唯一方法是将“模块”属性设置为“无”，但是我不能在我的代码中使用导入、导出，并且必须将我的所有 Typescript 文件合并到一个文件中。这将使开发更加困难。
• 我查看了存储库，例如Konva.js 的，它做我想做的事。但我不明白它是如何工作的。似乎开发人员将代码转换为 umd，然后使用 rollup.js，并且在构建结束时，只要需要所有 Typescript 代码，就会存在一个 javascript 文件。

评论

我一直在寻找解决方案，但很难找到代表我正在寻找的完美术语。这就是为什么我在这里问它并希望有人可以帮助我。

Answer 1

浏览器不直接理解 typescript，所以为什么使用 typescript 编译器我们将 typescript 代码转换为 javascript。因此，当我们构建一个 typescript 项目或模块时，我们通常有一个 typescript 配置文件 tsconfig.json，typescript 编译器在将 typescript 编译为 javascript 时会使用该文件。

这只是 tsconfig.json 文件中一些配置的快照。首先，你想定位大部分浏览器，所以你将目标属性设置为 es5。因为大多数新旧浏览器都对它有很好的支持。现在您的 typescript 编译器将在 es5 版本中生成 javascript。还有另一个属性调用 outDir ，它将包含您输出的 javascript 代码，您可以将其直接导入生产中的其他 javascript 文件中，或者其他人可以使用标签导入它。

在你的 package.json 文件中，你可以设置构建脚本，让它运行一个 typescript 编译器来编译 typescript 代码。

关于第 2 点，你可以做的是你可以指定你的 typescript 模块的入口点，比如它可以是 package.json 中的 main.ts 或 index.ts，所以当其他 typescript 开发人员使用这个库时，就会有构建工具将自动获取在库的入口点中定义的导入。那么这个入口点文件中的内容是一个问题？它将包含库的所有模块的导出。这样，您库的所有模块都可供其他 typescript 用户使用。

您还可以检查 konvasjs tsconfig 文件。他们在做什么他们在生产中使用的 lib 目录中输出他们的 javascript 文件。为了开发，他们使用普通的打字稿文件。

Answer 2

我深入研究了包生成器并发现：iife 是我正在寻找的术语。 iife 构建允许直接通过 script 标签加载库，无需任何其他内容。

经过数小时的测试，我找到了一个完美的解决方案来构建满足我需求的库：rollup.js

核心 npm 包是：

• rollup：包生成器。
• @rollup/plugin-typescript: TS 插件，用于编译 TS。
• @rollup-plugin-generate-package-json：自动复制package.json，修改后移动到输出目录。

我的解决方案创建了一个具有这种结构的包：

|dist
|- js
|-- MyLibrary.js
|- es
|-- // ES files
|- package.json

MyLibrary.js 文件可以在<script> 标签内轻松导入，Typescript 相关文件位于“es”文件夹中。该包会自动定向到 es/index.js，这意味着 Typescript 开发人员应该能够在其 IDE 中使用自动完成类型建议。

您可以在此处找到示例存储库： https://github.com/julianpoemp/rolltsup-sample

package.json：

{
  "name": "my-lib",
  "version": "0.0.1",
  "description": "",
  "main": "src/main.js",
  "dependencies": {
    "rollup": "^2.38.5"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.1.0",
    "@rollup/plugin-typescript": "^8.1.1",
    "rollup-plugin-generate-package-json": "^3.2.0",
    "tslib": "^2.1.0",
    "typescript": "^4.1.3"
  },
  "scripts": {
    "build": "rollup --config rollup.config.js && rollup --config rollup.config_es.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

rollup.config.js

import typescript from '@rollup/plugin-typescript';

// rollup.config.js
export default {
    input: 'src/index.ts',
    output: {
        file: 'dist/js/myLibrary.js',
        name: 'MyLibrary',
        format: 'iife'
    },
    plugins: [
        typescript({
            target: "ES5",
            declaration: true,
            outDir: "dist/js",
            rootDir: "src"
        })
    ]
};

rollup.config_es.js

 import typescript from '@rollup/plugin-typescript';
import generatePackageJson from 'rollup-plugin-generate-package-json'

// rollup.config.js
export default {
    input: 'src/index.ts',
    output: {
        dir: 'dist/es',
        name: 'MyLibrary',
        format: 'es'
    },
    plugins: [
        typescript({
            target: "ES5",
            declaration: true,
            outDir: "dist/es",
            rootDir: "src"
        }),
        generatePackageJson({
            outputFolder: "dist",
            baseContents: (pkg) => {
                pkg.main = "es/index.js";
                pkg.scripts = undefined;
                return pkg;
            }
        })
    ]
};