发布一个工具到NPM

发表于 2022-04-26 分类于前端

基于 typescript 与 rollup 编写一个工具，并发布到 npm

准备工作

新建文件夹

安装 git、node 然后在 github 上新建一个代码仓库并 git clone 到本地。

初始化

在项目的根目录下执行以下命令，根据提示输入作者等信息

npm init

在根目录下新建 src 文件夹并添加 index.ts 文件

顺利的话现在的目录结构是这样的

start

可选：

修改 package.json，添加"type": "module"，然后就可以直接使用 import/export 了
在根目录添加.gitignore，并写入 node_modules/ 避免提交依赖

typescript

项目代码使用 ts 编写，若不需要直接忽略 ts 相关的内容即可

安装与初始化

安装 typescript

npm install typescript

根目录下添加 ts 配置文件 tsconfig.json

{
  "include": ["src"], // 需要编译的目录
  "exclude": ["node_modules"], // 忽略的目录
  "compilerOptions": {
    "declaration": true, // 生成声明文件 *.d.ts
    "outDir": "dist" // 生成文件的输出目录
  }
}

测试编译

往 src/index.ts 中写入

function sum(a: number, b: number): number {
  return a + b;
}

export default sum;

然后在根目录执行 tsc 进行编译，顺利的话就能在 dist 目录获得生成的文件了，此时目录结构应该像这样

tsc

测试包的安装与执行

这一步主要是在本地确认包能够被正常安装与使用

修改 package.json 中的 main 为 ./dist/index.js，也就是将包的入口文件定为我们生成的文件。

然后本地随便一个项目执行 npm install 这个包的目录 就可以安装这个包了。

最后在安装了这个包的项目里就可以正常使用了，使用的代码应该类似

import sum from "tools";
sum(100, 200); //300

发布包到 npm

首先确认本地 npm 注册的地址没有切换到淘宝之类的镜像地址，如果切换了的话需要执行一下命令切换回来再继续

npm config set registry https://registry.npmjs.org/

npm 网站注册账号密码，注册地址地址：https://www.npmjs.com/signup
登录 npm，npm login
发布包，npm publish

然后就可以正常的使用 npm install 包名的形式安装了！

打包 js 文件（CDN）

为了方便直接在浏览器中引入我们编写的工具，往往还需要将多个 js 打包到一起供其他开发者直接使用 script 标签引入使用，打包工具有很多种，这里以 rollup 为例

安装依赖

安装 rollup

npm install -D rollup

安装压缩代码的 rollup 插件

npm install -D rollup-plugin-terser

安装编译 ts 的 rollup 插件

npm install -D @rollup/plugin-typescript tslib

在根目录下添加 rollup 的配置文件 rollup.config.js，填入以下内容

import { terser } from "rollup-plugin-terser";
import typescript from "@rollup/plugin-typescript";

export default {
  input: "./src/index.ts",
  output: [
    {
      file: "./dist/sum.min.js",
      format: "iife",
      name: "xxxx", // 暴露在全局的变量名
    },
  ],
  plugins: [
    typescript({
      compilerOptions: {
        declaration: false,
      },
    }),
    terser(),
  ],
};

执行 rollup -c 即可在 dist 目录获得生成的 js。保存提交，再次发布本包

然后借助 unpkg.com 即可直接在 html 中引入该文件了（不需要任何配置），将下方链接替换入你的项目名和构建生成的文件名即可：

<script src="https://unpkg.com/你的项目名/dist/文件名.js"></script>

更新包

发布之后可能会有功能迭代或者 bug 修复，所以我们一般都会需要更新，更新的时候需要修改 package 的版本号，使用以下命令：

npm version <update_type>

update_type

patch 最小版本号+1，如 0.0.1 -> 0.0.2
minor 小版本号+1，如 0.0.1 -> 0.1.0
major 大版本号+1，如 0.0.1 -> 1.0.0

若关联了 git，执行命令后会自动生成一笔提交，直接 git push 即可

其他

为了方便后续构建，可以将 “build”: “rollup -c & tsc” 加入到 package.json 的 script 中，后面直接执行 npm run build 即可