向 NPM 发布软件包自身并不是一个特别困难的应战。可是，配置你的 TypeScript 项目以取得成功可能是一个应战。你的软件包能在大多数项目上运转吗？用户能否运用类型提示和主动完成功用？它能与 ES Modules (ESM) 和 CommonJS (CJS) 风格的导入一同运用吗？

阅览完本篇文章后，你将了解怎么使你的 TypeScript 包在任何（或大多数）JavaScript 和 TypeScript 项目中更易于访问和运用，包括浏览器支撑！

创立 TypeScript 项目 ​

假如你正在阅览本文，那么你很可能现已建立了一个 TypeScript 项目。假如这样做，你可能想跳到后续过程或留下来检查是否存在差异。

让咱们首要创立根本 Node.js 项目并添加 TypeScript 作为开发依赖项：

npm init -y
npm install typescript --save-dev

你可能期望在 src 文件夹中构建代码。因而，让咱们在其间创立包的进口点：

mkdir src
touch src/index.ts

现在，Node.js 和浏览器不理解 TypeScript，因而咱们需求设置 tsc （TypeScript 编译器）将 TypeScript 代码编译为 JavaScript。让咱们经过运转以下指令将 tsconfig.json 文件添加到咱们的项目中：

npx tsc --init

假如咱们现在运转 npx tsc，它会扫描咱们的文件夹并在与 .ts 文件相同的目录中创立 .js 文件（这是不可取的）。让咱们在运转之前添加更好的配置，避免造成紊乱。

将以下行添加到 tsconfig.json：

{
    "compilerOptions": {
        // ... Other options
        "rootDir": "./src", // Where to look for our code
        "outDir": "./dist", // Where to place the compiled JavaScript
}

咱们还向 package.json 添加一个“build”脚本：

{
    "scripts": {
        "build": "tsc"
    }
}

假如咱们现在运转 npm run build ，一个新的 dist 文件夹将呈现，其间包括已编译的 JavaScript。假如你运用的是 Git，请保证将 dist 文件夹添加到 .gitignore 中。

设置 tsc 以取得最佳开发者体验 ​

咱们现已可以将 TypeScript 编译为 JavaScript。可是，假如你按原样将其发布到 npm，则只能在其他 JavaScript 项目中无缝运用它。此外，默认方针配置是“es2016”，而现代浏览器最多仅支撑“es2015”。那么让咱们处理这个问题吧！

首要，让咱们将方针(target)更改为 es2015 （或 es6 ，由于它们是相同的）。 esModuleInterop 默认为 true。让咱们保持原样，由于它经过答应 ESM 样式导入来提高兼容性。

咱们运用 TypeScript 都有一个原因：类型！可是，假如你现在就构建并发布你的软件包，那么它将不会发布任何类型。让咱们经过将 declaration 设置为 true 来处理这个问题。这将与 .js 文件一同生成声明文件（.d.ts）。仅凭这一点，你的软件包就能在 TypeScript 项目中运用，甚至在 JavaScript 项目中也能供给类型提示。

声明文件在改善支撑和开发人员体验方面现已发挥了很大效果。但是，咱们可以经过添加 declarationMap 来更进一步。这样，将生成源映射 (.d.ts.map)，以将咱们的声明文件 (.d.ts) 映射到咱们的原始 TypeScript 源代码 (.ts)。这意味着代码编辑器在运用“转到界说”时可以转到原始 TypeScript 代码，而不是编译后的 JavaScript 文件。

当咱们这样做时，sourceMap 将添加源映射文件 (.js.map)，这些文件答应调试器和其他工具在实际处理宣布的 JavaScript 文件时显现原始 TypeScript 源代码。

运用 declarationMap 或 sourceMap 意味着咱们还需求将源代码与软件包一同发布到 npm。

综上所述，这是咱们最终的 tsconfig.json 文件：

{
    "compilerOptions": {
        "target": "es2015",
        "module": "commonjs",
        "strict": true,
        "esModuleInterop": true,
        "rootDir": "./src",
        "outDir": "./dist",
        "sourceMap": true,
        "declaration": true,
        "declarationMap": true,
    }
}

package.json

这里的工作要简单得多。当用户导入包时，咱们需求指定包的进口点。因而，让咱们将 main 设置为 dist/index.js 。

除了进口点之外，咱们还需求指定主要类型声明文件。在这种情况下，这将是 dist/index.d.ts 。

咱们还需求指定随包一同供给哪些文件。当然，咱们需求发送构建的 JavaScript 文件，但由于咱们运用的是 sourceMap 和 declarationMap ，所以咱们还需求发送 src 。

这是包括所有内容的参考 package.json ：

{
  "name": "the-greatest-sdk", // Your package name
  "version": "1.0.3", // Your package version
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc"
  },
  "keywords": [], // Add related keywords
  "author": "liblab", // Add yourself here
  "license": "ISC",
  "files": ["dist", "src"],
  "devDependencies": {
    "ts-node": "^10.9.1",
    "typescript": "^5.0.4"
  }
}

发布到 NPM​

发布到 NPM 并不困难。我强烈建议你查看官方阐明，但以下是一般过程：

  1. 保证你的 package.json 设置正确。
  2. 构建项目（假如你遵从指南，则运用 npm run build ）。
  3. 假如你还没有登录，请运用 npm login 向 npm 进行身份验证（你需求一个 npm 帐户）。
  4. 运转 npm publish 。

请记住，假如你更新软件包，则需求在再次发布之前添加 package.json 中的 version 选项。

有更杂乱的（和引荐的）方法来进行发布，例如运用 GitHub Action 和 releases，特别是对于开源包，但这超出了本文的规模。

原文：blog.liblab.com/typescript-…