如何在 NPM 上创建和发布 TypeScript 包

随着 TypeScript 的日益流行，许多开发人员正在创建静态类型包以利用该语言提供的优势。在这篇文章中，我们将介绍使用 TypeScript 创建和发布 NPM 包的过程。

1. 配置环境

确保安装了 Node.js、NPM 和 TypeScript。您可以使用以下命令全局安装 TypeScript：

npm install -g typescript

检查一切是否安装正确：

node -v
npm -v
tsc -v

2. 创建项目

首先为您的项目创建一个目录：

mkdir meu-pacote-typescript
cd meu-pacote-typescript

初始化 Node.js 项目：

npm init

这将创建 package.json 文件，您可以在其中定义基本包信息。

3. 配置 TypeScript

现在，初始化一个 TypeScript 项目：

tsc --init

这将创建一个 tsconfig.json 文件。根据需要进行编辑，但常见的配置如下：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"]
}

在这里，我们配置 TypeScript 编译器来生成带有 CommonJS 模块的 ES6 代码，并包含类型声明（声明：true）。编译后的代码会放在dist.

4. 编写代码

创建一个 src 目录并在其中创建一个 index.ts 文件：

mkdir src
touch src/index.ts

在index.ts文件中，编写你的包代码。让我们创建一个简单的函数来将字符串转换为大写：

export function toUpperCase(str: string): string {
  return str.toUpperCase();
}

5. 编译代码

将 TypeScript 编译为 JavaScript：

tsc

这将在 dist 目录中生成 JavaScript 文件和类型声明。

6. 本地测试包

要测试您的包，您可以将其本地安装在另一个项目中：

1. 在您的测试项目目录中，运行：

   npm install ../caminho-para-o-diretorio-do-seu-pacote/dist

1. 在测试项目中使用该函数：

   import { toUpperCase } from 'nome-do-seu-pacote';

   console.log(toUpperCase('hello world')); // "HELLO WORLD"

这可以确保 JavaScript 代码和类型声明都能正常工作。

7. 在 NPM 上发布

如果一切正常，您就可以发布您的包了。

1. NPM 登录

如果您还没有 NPM 帐户，请创建一个并登录：

   npm login

1. 出版

发布之前，在 package.json 中添加构建脚本：

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

并在package.json中添加输出路径：

   "main": "dist/index.js",
   "types": "dist/index.d.ts"

现在编译发布：

   npm run build
   npm publish

如果包名称已经存在，您需要选择一个新名称。

8. 更新套件

要发布新版本，请更改 package.json 中的版本，再次运行 npm run build，然后发布：

npm publish

9. 良好实践

• 文档：包含一个 README.md 文件，解释如何使用你的包。
• 测试：使用 Jest 等框架编写测试，以确保代码按预期工作。
• Linting：使用 ESLint 和 Prettier 等工具来维护代码质量。
• 版本控制：按照 SemVer 对您的包进行版本控制。

结论

在 NPM 上创建和发布 TypeScript 包不仅可以提高代码质量，还可以为使用你的包的人提供打字方面的好处。通过遵循本指南，您将准备好与 JavaScript 和 TypeScript 社区分享您的解决方案，为更强大、更稳健的开发生态系统做出贡献。

现在您已经了解了流程，那么开始构建您的下一个 TypeScript 包怎么样？

以上是如何在 NPM 上创建和发布 TypeScript 包的详细内容。更多信息请关注PHP中文网其他相关文章！