Vue 组件封装发布 npm 包（2023/03/17）

Vue 组件封装发布 npm 包（2023/03/17）

项目中经常遇到需要组件复用的情况，本文将介绍如何将 Vue 组件封装成 npm 包，并上传到 npm 私有仓库（本文不介绍 npm 私有仓库的搭建，请自行查阅相关资料）。

1. 前提条件

• npm 私有仓库；
• nodejs；
• Vue；

2. 准备项目

2.1 创建 Vue 项目

1. 通过 vue-cli 创建并初始化 vue2 项目；

   $ vue create app
   

2. 创建src/packages目录用来存放组件，项目整体目录结构如下；

   app
   ├── README.md
   ├── babel.config.js
   ├── jsconfig.json
   ├── node_modules
   ├── package-lock.json
   ├── package.json
   ├── public
   │   ├── favicon.ico
   │   └── index.html
   ├── src
   │   ├── App.vue
   │   ├── assets
   │   ├── components
   │   ├── packages
   │   └── main.js
   └── vue.config.js
   

2.2 编写组件

此处以简单的 HelloVue 组件为例，新建src/packages/hello-vue/index.vue文件，内容如下：

2.3 测试组件

在src/App.vue中引入HelloVue组件测试能否正常使用，内容如下：

2.4 编写打包入口文件

测试通过后，编写打包入口 js 文件，创建src/index.js文件，内容如下：

import HelloVue from "./packages/hello-vue/index.vue";

// 需要打包导出的组件
const components = [
    HelloVue
];

const install = function (Vue) {
    components.map(component => {
        Vue.component(component.name, component);
    });
}

if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}

export default {
    name: "HelloVue",
    version: "1.0.0",
    install
};

2.5 编写 Readme

编写Readme.md文件内容，如插件使用方式等等。

3. 打包发布

3.1 非编译方式（推荐）

使用非编译的方式可以解决src/assets文件夹下静态文件依赖的问题，但无法解决public目录静态文件依赖问题（目前还没找到较好的解决办法）。

1. 修改package.json文件，修改内容如下：

   {
     "name": "@zhy/app", // 包名
     "version": "0.1.0", // 版本号，后续每次更新发布都要修改
     "private": false, // 必须修改为 false
     "description": "Hello Vue!", // 包描述
     "main": "./src/index.js" // 包入口文件
   }
   

2. 添加.npmignore文件，忽略不需要发布的文件，如配置文件等；

   node_modules/
   
   public/
   
   src/components
   src/App.vue
   src/main.js
   
   .gitignore
   
   babel.config.js
   jsconfig.json
   package-lock.json
   vue.config.js
   
   .idea
   

3. 登录私有仓库，此处笔者仓库地址为http://172.20.2.5:8081/repository/npm-hosted/；

   # 根据提示输入用户名密码登录
   $ npm login --registry http://172.20.2.5:8081/repository/npm-hosted/
   

4. 发布到私有仓库；

   # 发布
   $ npm publish --registry http://172.20.2.5:8081/repository/npm-hosted/
   
   # 从私有仓库删除（谨慎操作）
   $ npm unpublish -f --registry http://172.20.2.5:8081/repository/npm-hosted/
   

3.2 编译方式

编译的方式可以对代码进行编译压缩，隐藏源码，但无法解决静态文件依赖的问题。

1. 修改package.json文件，修改内容如下：

   {
     "name": "@zhy/app", // 包名
     "version": "0.1.0", // 版本号，后续每次更新发布都要修改
     "private": false, // 必须修改为 false
     "description": "Hello Vue!", // 包描述
     "main": "./app/app.umd.js", // 包入口文件，对应打包后的目录
     "scripts": {
       "serve": "vue-cli-service serve",
       "build": "vue-cli-service build",
       "lint": "vue-cli-service lint",
       // 新增打包脚本，--name 打包后的名字，--dest 打包后的目录
       "package": "vue-cli-service build --target lib src/index.js --name app --dest app"
     }
   }
   

2. 打包编译；

   # 成功后生成打包目录 app
   $ npm run package
   

3. 添加.npmignore文件，忽略不需要发布的文件，如配置文件等；

   node_modules/
   
   public/
   src/
   
   .gitignore
   .npmignore
   
   babel.config.js
   jsconfig.json
   package-lock.json
   vue.config.js
   
   .idea
   

4. 登录私有仓库，此处笔者仓库地址为http://172.20.2.5:8081/repository/npm-hosted/；

   # 根据提示输入用户名密码登录
   $ npm login --registry http://172.20.2.5:8081/repository/npm-hosted/
   

5. 发布到私有仓库；

   # 发布
   $ npm publish --registry http://172.20.2.5:8081/repository/npm-hosted/
   
   # 从私有仓库删除（谨慎操作）
   $ npm unpublish -f --registry http://172.20.2.5:8081/repository/npm-hosted/
   

4. 测试使用

1. 创建并初始化 Vue 项目；

   $ vue create test-app
   

2. 安装依赖；

   $ npm install @zhy/app --registry http://172.20.2.5:8081/repository/npm-hosted/
   

3. 在src/main.js文件中注册插件;

   import HelloVue from '@zhy/app';
   
   Vue.use(HelloVue);
   

4. 在App.vue中使用插件；

参考资料:

• Vue封装组件并发布到npm仓库 - 掘金 (juejin.cn)
• 封装Vue组件并发布到npm（完美解决组件中的静态文件引用） - 浅笑· - 博客园 (cnblogs.com)
• Vue封装组件并发布到npm仓库-阿里云开发者社区 (aliyun.com)