如何为用户构建具有高兼容性的Typescript库？ 我想做什么我需要什么到目前为止我尝试了什么评论

如何解决如何为用户构建具有高兼容性的Typescript库？ 我想做什么我需要什么到目前为止我尝试了什么评论

我想做什么

我想创建一个可以用作 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. 通常，该库与旧浏览器的兼容性应尽可能高。

到目前为止我尝试了什么

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

评论

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

解决方法

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

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

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

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

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

,

我更深入地了解包构建器并发现：iife 是我一直在寻找的术语。 iife 构建允许直接通过脚本标签加载库，无需任何其他操作。

经过数小时的测试，我找到了一个完美的解决方案来构建适合我需求的库：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',format: 'es'
    },outDir: "dist/es",rootDir: "src"
        }),generatePackageJson({
            outputFolder: "dist",baseContents: (pkg) => {
                pkg.main = "es/index.js";
                pkg.scripts = undefined;
                return pkg;
            }
        })
    ]
};