教你30秒发布一个TypeScript包到NPM的方法步骤

1. 创建 NPM 账号

首先，你需要在 NPM 官网注册一个账号。注册账号很简单，只需要填写几个基本信息即可。若你已有账号，请跳过此步。

1. 初始化工程

创建工程文件夹，进入此文件夹，初始化工程： npm init （在终端输入该命令后，按照提示输入参数）

1. 安装 TypeScript

在终端输入以下命令：

npm install typescript --save-dev

1. 创建 src 目录

在工程目录下创建 src 目录，此目录中包含你的 TypeScript 源码。

1. 编写 TypeScript 文件

在 src 目录下创建 TypeScript 文件，编写相关代码（此处不做具体讲解）。

1. 编写 TypeScript 配置文件

在根目录下创建名为 tsconfig.json 的文件。tsconfig.json 是 TypeScript 的配置文件，根据你的需要进行配置。示例配置如下：

{
    "compilerOptions": {
        "declaration": true,
        "module": "commonjs",
        "outDir": "./dist",
        "target": "es5",
        "esModuleInterop": true
    },
    "include": ["./src/**/*"],
    "exclude": ["node_modules", "**/*.spec.ts"]
}

1. 编译 TypeScript 文件

在终端输入以下命令：

./node_modules/.bin/tsc --project .

这个命令会编译所有 TypeScript 文件，并输出到 dist 目录下。

1. 创建入口文件

在工程目录下创建 index.js 文件，并将编译后的 TypeScript 代码引入其中。

const { exampleFunc } = require('./dist/example');
module.exports = {
  exampleFunc
};

1. 登录 NPM

在终端输入以下命令，按照提示输入你在 NPM 官网上注册的账号和密码：

npm login

1. 发布包

在终端输入以下命令：

npm publish

至此，你的 TypeScript 包已经成功发布到 NPM 上了。

示例一：

假设你要发布一个名为 my-package 的 TypeScript 包。

• 工程目录：/my-package
• TypeScript 文件路径：/my-package/src/index.ts
• 入口文件路径：/my-package/index.js

示例配置：

tsconfig.json

{
    "compilerOptions": {
        "declaration": true,
        "module": "commonjs",
        "outDir": "./dist",
        "target": "es5",
        "esModuleInterop": true
    },
    "include": ["./src/**/*"],
    "exclude": ["node_modules", "**/*.spec.ts"]
}

index.js

const { exampleFunc } = require('./dist/example');
module.exports = {
  exampleFunc
};

发布命令：

npm publish

示例二：

假设你的 TypeScript 包已经发布了，名为 my-package。

安装该包的命令如下：

npm install my-package

在项目中使用该包：

const { exampleFunc } = require('my-package');
// 这里调用 exampleFunc

以上为教你30秒发布一个TypeScript包到NPM的方法步骤，如有不详细或者讲解不当的地方，敬请指正。