登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›本地新建js公用库组件并打包发布到npm仓库详细说明 ...

本地新建js公用库组件并打包发布到npm仓库详细说明

圄旧剖 2025-6-1 21:14:33
有时候，我们想在本地开发一个公用js函数组件库，并上传到npm仓库供开发者使用，本文就详细介绍了从新建本地项目到发布至npm仓库的整过过程，供大家学习！
1、注册账号

首先我们去npm官网注册一个账号，注册成功后请牢记账号和密码。
需要注意的是，现在npm登录好像启用了双因素认证机制，也就是登录的时候不仅需要密码登录，还需要通过发送邮件随机字符进行登录验证，所以在注册账号的时候，切记要牢记当时注册填写的邮箱。
2、初始化项目

这里我们使用IDE（VS Code）进行开发本地js组件库。
2.1、package.json

使用如下命令初始化生成package.json：
  1. npm init -y
复制代码
1.png

2.2、TypeScript依赖

使用如下命令安装开发的TypeScript依赖：
  1. npm install typescript --save-dev
复制代码
此时在package.json文件中就会生成如下开发所需要的依赖包：
2.png

2.3、tsconfig.json

使用如下命令可初始化生成tsconfig.json：
  1. npx tsc --init --declaration --target ES6 --module ESNext --declarationDir ./dist --outDir ./dist
复制代码
3.png

tsconfig.json中主要配置说明如下：
  1. {
  2.         "compilerOptions": {
  3.                 "target": "es6",                     // 编译目标版本
  4.                 "module": "esnext",                  // 模块规范
  5.                 "declaration": true,                 // 生成.d.ts类型声明文件
  6.                 "declarationDir": "./dist",          // 声明文件输出目录
  7.                 "outDir": "./dist",                  // 编译输出目录
  8.                 "strict": true                       // 严格类型检查
  9.         }
  10. }
复制代码
3、新建项目文件和文件夹

在项目根目录下分别新建如下文件和文件夹：

  • README.md：用于编写该项目的说明信息的Markdown文件；
  • CHANGELOG.md：用于记录版本变更信息的Markdown文件；
  • src文件夹：用于存放ts/js源码的文件夹；

    • index.ts文件：项目的入口文件；
    • types文件夹：用于存放源码中用到的type类型文件；
    • utils文件夹：用于存放源码中具体的ts/js函数文件。

  • test文件夹：用于测试的源码文件夹。
目录文件和文件夹结果如下图所示：
4.png

4、编写js函数代码


  • 在/src/types目录下新建user.ts文件，然后编写如下代码：
    1. /**
    2. * 用户信息实体
    3. */
    4. export type UserModel = {
    5.         /** 用户姓 */
    6.         FirstName?: string;
    8.         /** 用户名 */
    9.         LastName?: string;
    11.         /** 年龄 */
    12.         Age?: number;
    13. };
    复制代码
    5.png

  • 在/src/utils目录下新建user.ts文件，然后编写如下代码：
    1. import { UserModel } from "../types/user";
    3. /**
    4. * 默认用户信息
    5. */
    6. export const defaultUser: UserModel = {
    7.         FirstName: "Zhang",
    8.         LastName: "San",
    9.         Age: 18,
    10. };
    12. /**
    13. * 获取用户信息
    14. * @returns 返回用户信息
    15. */
    16. export const getUser = (): UserModel => {
    17.         return defaultUser;
    18. };
    20. /**
    21. * 获取用户全名
    22. * @param firstName 姓
    23. * @param lastName 名
    24. * @returns 返回用户全名
    25. */
    26. export const getFullName = (firstName: string, lastName: string): string => {
    27.         return `${firstName} ${lastName}`;
    28. };
    复制代码
    6.png

  • 上述代码中，我们就定义好了一个用户信息实体和获取用户的工具函数。接下来我们修改/src/index.ts文件，代码如下：
    1. /** 导出/types/user.ts中的所有type */
    2. export * from "./types/user";
    4. /** 导出/utils/user.ts中的所有属性或函数 */
    5. export * from "./utils/user";
    复制代码
    7.png

到此，上述的ts/js代码就编写完成了。
需要注意的是：编写ts/js函数或属性的时候，需要将注释按照规范写清楚，以便在业务项目使用的时候自动出现提示信息，方便开发者在IDE中（鼠标悬停）查阅。
5、打包配置

此处我们介绍一下rollup和microbundle组件进行打包，推荐使用rollup组件。
5.1、rollup（推荐）

5.1.1、安装打包组件

在项目根目录分别执行如下命令：
  1. npm install --save-dev rollup @rollup/plugin-typescript typescript tslib
  3. npm install @rollup/plugin-terser --save-dev
复制代码
8.png

9.png

5.1.2、新建rollup.config.js

在项目根目录新建rollup.config.js文件，并在该文件中写入如下代码：
  1. import typescript from "@rollup/plugin-typescript";
  2. import terser from "@rollup/plugin-terser";
  4. export default {
  5.     input: "src/index.ts",
  6.     output: [
  7.         // 未压缩的ES模块
  8.         {
  9.             file: "dist/index.esm.js",
  10.             format: "es",
  11.             sourcemap: true, // 可选：生成SourceMap
  12.         },
  13.         // 压缩后的ES模块
  14.         {
  15.             file: "dist/index.esm.min.js",
  16.             format: "es",
  17.             plugins: [
  18.                 // 仅针对此输出启用压缩
  19.                 terser({
  20.                     compress: { drop_console: true }, // 删除console语句
  21.                     format: { comments: false }, // 移除注释
  22.                 }),
  23.             ],
  24.             sourcemap: true,
  25.         },
  26.         // 未压缩的CommonJS模块
  27.         {
  28.             file: "dist/index.cjs.js",
  29.             format: "cjs",
  30.             sourcemap: true,
  31.         },
  32.         // 压缩后的CommonJS模块
  33.         {
  34.             file: "dist/index.cjs.min.js",
  35.             format: "cjs",
  36.             plugins: [
  37.                 terser({
  38.                     compress: { drop_console: true },
  39.                     format: { comments: false },
  40.                 }),
  41.             ],
  42.             sourcemap: true,
  43.         },
  44.     ],
  45.     plugins: [
  46.         typescript({
  47.             tsconfig: "./tsconfig.json",
  48.             // exclude: ["**/*.test.ts"],
  49.         }),
  50.     ],
  51. };
复制代码
10.png

5.1.3、修改package.json

修改package.json文件，修改的主要配置如下：
  1. {
  2.     "type": "module",
  3.     "main": "dist/index.cjs.js",
  4.     "module": "dist/index.esm.js",
  5.     "types": "dist/index.d.ts",
  6.     "scripts": {
  7.         "build": "rollup -c"
  8.     }
  9. }
复制代码
11.png

5.1.4、运行打包

执行如下命令进行打包：
  1. npm run build
复制代码
12.png

如上图所示，我们发现多了一个dist文件夹，该文件夹就是打包编译的文件目录了，下面则是dist文件夹中部分文件的展示。
dist\index.d.ts：
13.png

dist\types\user.d.ts：
14.png

dist\utils\user.d.ts：
15.png

dist\index.cjs.js：
16.png

dist\index.cjs.js.map：
17.png

dist\index.cjs.min.js：
18.png

5.2、microbundle

5.2.1、安装打包组件

在项目根目录执行如下命令：
  1. npm install microbundle --save-dev
复制代码

出现的警告信息可忽略。
此时在package.json文件中就会生成如下图所示开发所需要的依赖包：
20.png

5.2.2、修改package.json

修改package.json文件的配置如下：
  1. {
  2.     "type": "module",
  3.     "source": "./src/index.ts",
  4.     "main": "./dist/index.js",
  5.     "module": "./dist/index.mjs",
  6.     "types": "./dist/index.d.ts",
  7.     "exports": {
  8.         ".": {
  9.             "require": "./dist/index.js",
  10.             "import": "./dist/index.mjs"
  11.         }
  12.     },
  13.     "scripts": {
  14.         "build": "microbundle"
  15.     }
  16. }
复制代码
配置说明：
  1. {
  2.         "main": "./dist/index.js",          // CommonJS 入口（可选）
  3.         "module": "./dist/index.mjs",       // ES Module 入口
  4.         "exports": {
  5.         ".": {
  6.                         "require": "./dist/index.js", // CommonJS
  7.                         "import": "./dist/index.mjs"  // ES Module
  8.                 }
  9.         }
  10. }
复制代码
修改后的package.json如下图所示：
21.png

5.2.3、运行打包

执行如下命令进行打包：
  1. npm run build
复制代码
22.png

如上图所示，我们发现多了一个dist文件夹，该文件夹就是打包编译的文件目录了，下面则是dist文件夹中部分文件的展示。
index.d.ts：
23.png

user.d.ts：
24.png

user.d.ts：
25.png

index.cjs：
26.png

6、发布前的准备

6.1、.npmignore

我们在项目根目录下新建.npmignore文件，用于配置发布忽略的文件或文件夹，具体内容如下：
  1. test/
  2. package-lock.json
  3. *.log
  4. *.tgz
复制代码
27.png

6.2、配置package.json文件

接下来我们需要配置配置package.json文件，完整配置如下所示：

  • rollup打包对应的配置：
    1. {
    2.         "name": "rapid-test",
    3.         "version": "1.0.0",
    4.         "description": "常用的公用处理函数。",
    5.         "type": "module",
    6.         "main": "dist/index.cjs.js",
    7.         "module": "dist/index.esm.js",
    8.         "types": "dist/index.d.ts",
    9.         "scripts": {
    10.                 "test": "echo "Error: no test specified" && exit 1",
    11.                 "build": "rollup -c"
    12.         },
    13.         "keywords": [
    14.                 "utils",
    15.                 "helpers"
    16.         ],
    17.         "author": {
    18.                 "name": "qubernet",
    19.                 "email": "qubernet@163.com",
    20.                 "url": "https://www.cnblogs.com/qubernet"
    21.         },
    22.         "license": "MIT",
    23.         "devDependencies": {
    24.                 "@rollup/plugin-terser": "^0.4.4",
    25.                 "@rollup/plugin-typescript": "^12.1.2",
    26.                 "rollup": "^4.34.9",
    27.                 "tslib": "^2.8.1",
    28.                 "typescript": "^5.8.2"
    29.         }
    30. }
    复制代码
    28.png

  • microbundle打包对应的配置：
    1. {
    2.         "name": "rapid-test",
    3.         "version": "1.0.0",
    4.         "description": "常用的公用处理函数。",
    5.         "type": "module",
    6.         "source": "./src/index.ts",
    7.         "main": "./dist/index.js",
    8.         "module": "./dist/index.mjs",
    9.         "types": "./dist/index.d.ts",
    10.         "exports": {
    11.                 ".": {
    12.                         "require": "./dist/index.js",
    13.                         "import": "./dist/index.mjs"
    14.                 }
    15.         },
    16.         "scripts": {
    17.                 "test": "echo "Error: no test specified" && exit 1",
    18.                 "build": "microbundle"
    19.         },
    20.         "keywords": [
    21.                 "utils",
    22.                 "helpers"
    23.         ],
    24.         "author": {
    25.                 "name": "qubernet",
    26.                 "email": "qubernet@163.com",
    27.                 "url": "https://www.cnblogs.com/qubernet"
    28.         },
    29.         "license": "MIT",
    30.         "devDependencies": {
    31.                 "microbundle": "^0.15.1",
    32.                 "typescript": "^5.7.3"
    33.         }
    34. }
    复制代码
    29.png

到此，发布到npm仓库前的准备工作就完成了。
7、发布到npm

7.1、修改镜像源

在发布前，我们先将npm的镜像源修改为官网地址。
以管理员身份运行CMD。

  • 查看npm当前的镜像源
    1. npm config get registry
    复制代码
    30.png

  • 修改npm镜像源为官网地址（只需要执行该行命令即可，下面的修改为淘宝镜像源为了演示切换效果）
    1. npm config set registry https://registry.npmjs.org
    复制代码
    31.png

  • 修改npm镜像源为淘宝地址
    1. npm config set registry https://registry.npmmirror.com
    复制代码
    32.png

7.2、登录到npm

执行如下命令登录到npm（执行了如下命令后，会输出一个链接，打开这个链接，并登录即可授权）：
  1. npm login
复制代码
33.png

账号密码登录：
34.png

邮箱验证码登录（此步骤请到申请账号时填写的邮箱获取验证码）：
35.png

登录授权成功：
36.png

VS Code终端显示登录成功：
37.png

7.3、发布到npm仓库

执行如下命令发布到npm仓库：
  1. npm publish --access=public
复制代码
说明：

  • 上述命令中用到了--access=public，该参数只是初次发布的时候会使用到，后续升级直接使用npm publish即可；
  • 如果出现“npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/rapid-test - Package name too similar to existing package rapidtest; try renaming your package to '@quberfer/rapid-test' and publishing with 'npm publish --access=public' instead”错误导致发布失败，说明发布的包名可能和npm仓库中的包名有相似的或已经存在了，这时候我们只需要将发布的包名修改一个稍微特别的就可以了，如我们将rapid-test修改为rapid-test-tools
    38.png

    39.png

此时，我们登录到npm官网去查看，就有我们刚才发布的包了，如下图所示：
40.png

8、更新发布

当我们的项目做了修改后，则需要更新发布。
注意：更新发布前也需要将npm的镜像源修改为官网地址。
8.1、打包项目

执行如下命令打包项目：
  1. npm run build
复制代码
8.2、更新版本号

执行如下命令可更新小版本号：
  1. npm version patch
复制代码
说明：

  • patch：小版本号，自动修改最后一位版本号，如1.0.0会修改为1.0.1；
  • minor：中版本号，自动修改中间一位版本号，如1.0.0会修改为1.1.0；
  • major：大版本号，自动修改第一位版本号，如1.0.0会修改为2.0.0；
执行了上述命令后，会自动将package.json中的version增加一个小版本，如下所示：
执行命令前：
41.png

执行命令后：
42.png

8.3、发布到npm仓库

接着执行如下命令发布到npm仓库：
  1. npm publish
复制代码
43.png

44.png

9、使用js库

此时我们新建一个VUE3测试项目。
执行如下命令修改npm镜像源为淘宝地址：
  1. npm config set registry https://registry.npmmirror.com
复制代码
然后我们使用yarn在该测试项目中拉取rapid-test-utlsjs组件：
  1. yarn add rapid-test-tools
复制代码
45.png

随后我们在App.vue中导入rapid-test-tools中的属性、类型和方法：
46.png

使用属性和方法：
47.png

48.png

同时我们将鼠标放在属性或方法上时，也会有相应的提示信息：
49.png

50.png

到此，从本地开发js组件、打包组件、发布组件以及使用组件的整个流程就完成了。
10、发布过程命令

下面是统一整理的整个发布或更新到npm可能需要用到的命令：

  • 查看npm当前的镜像源
    1. npm config get registry
    复制代码
  • 修改npm镜像源为官网地址
    1. npm config set registry https://registry.npmjs.org
    复制代码
  • 修改npm镜像源为淘宝地址
    1. npm config set registry https://registry.npmmirror.com
    复制代码
  • 打包
    1. npm run build
    复制代码
  • 登录到npm
    1. npm login
    复制代码
  • 首次发布到npm
    1. npm publish --access=public
    复制代码
  • 更新版本号
    1. npm version patch
    复制代码

    • patch：小版本号，自动修改最后一位版本号，如1.0.0会修改为1.0.1；
    • minor：中版本号，自动修改中间一位版本号，如1.0.0会修改为1.1.0；
    • major：大版本号，自动修改第一位版本号，如1.0.0会修改为2.0.0；

  • 更新发布到npm
    1. npm publish
    复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
圄旧剖
2025-6-1 21:14:33

0

粉丝关注

14

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫