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

Question

我想做什么

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

我需要什么

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

库应该用 Typescript 开发。
构建应自动包含所有声明。 Typescript 开发人员应该能够导入该库的部分内容。
对于 Javascript 用户，库应该以“老式的方式”用作 <script>-Tag
如果调用 npm run build，构建应该自动生成。
一般来说，这个库对旧浏览器的兼容性应该尽可能高。

到目前为止我尝试了什么

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

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

时使用该文件

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

在您的 package.json 文件中，您可以设置构建脚本，因此它应该运行打字稿编译器来编译打字稿代码。

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

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

Answer 2

我深入研究了包生成器，发现：iife 是我要找的术语。 iife 构建允许直接通过脚本标签加载库，无需其他任何东西。

经过几个小时的测试，我找到了一个完美的解决方案来构建适合我需要的库：rollup.js

核心 npm 包是：

rollup：包生成器。
@rollup/plugin-typescript: TS plugin 为了编译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;
            }
        })
    ]
};

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

How to build Typescript library with high compatibility for users?

javascript

npm

typescript

tsc

我想做什么

我需要什么

到目前为止我尝试了什么

评论