关于vue3:用vitelerna配合verdaccio发布自己的前端包

年前做了一个相似于用户画像的我的项目，性能比拟独立，而且可能被很多我的项目作为一个功能模块嵌入，所以很天然的就想到把这个我的项目做成一个组件输入。vue-cli提供库打包模式，所以我每次开发完只须要将打包后的文件拷贝到其余我的项目就能够高兴地应用了。然而随着要援用这个模块的我的项目增多，和这个我的项目本身的开发迭代，这种手动拷贝的形式就太蠢了。显然我须要一套成熟的包治理计划，然而因为种种原因我又不能将代码公布到公共的 npm 上，只能在公司的测试服务器上搭建公有 npm 仓库。

上面我将一步一步地记录如果开发一个本人的前端包，如何搭建一个公有 npm 仓库，并上传本人的前端包，最初下载并援用本人的前端包。

lerna是什么我就不介绍了，如果你还不晓得就去看一下官网文档

全局装置lerna

npm install lerna -g
初始化我的项目

创立一个文件夹，并进入该文件夹执行以下命令：

lerna init

实现后，手动增加 .gitignore 文件，我的项目目录如下：
```
├── .gitignore
├── lerna.json
├── package.json
└── packages
```

创立包

lerna create @dede/app

创立包这里，你能够通过屡次 create 命令创立过个包进行开发、治理。

实现后我的项目构造如下：

├── .gitignore
├── lerna.json
├── package.json
└── packages
    └── app
        ├── README.md
        ├── __tests__
        │   └── app.test.js
        ├── lib
        │   └── app.js
        └── package.json

我在理论我的项目中用的是 vue-cli+vue2，这里我用vite+vue3 来做演示，毕竟 vite 是真的快啊！

进入到 /dede-cli/packages/app 目录，执行：

npm create vite@latest code -- --template vue-ts

胜利当前依据 vite 文档里库打包章节进行配置:

// vite.config.ts
import {defineConfig} from 'vite'
const path = require('path')
import vue from '@vitejs/plugin-vue'

export default defineConfig({plugins: [vue()],
  build: {
    outDir: './../dist',
    lib: {entry: path.resolve(__dirname, 'packages/index.ts'),
      name: 'app',
      fileName: (format) => `app.${format}.js`
    },
    rollupOptions: {
      // 确保内部化解决那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些内部化的依赖提供一个全局变量
        globals: {vue: 'Vue'}
      }
    }
  }
});

因为我应用的是 vue-ts 模板，所以还须要装置一下@types/node：

npm i --save-dev @types/node

在下面的配置中我的入口文件配置如下：

entry: path.resolve(__dirname, 'packages/index.ts')，

所以在 code 文件夹下须要新建一个 packages 文件，咱们对外输入的组件都是在这个文件夹开发的，同时packages/index.ts 应该导出一个蕴含 install 办法的对象，具体参考 vue 插件开发文档。

实现后咱们的 packages 目录内容如下：

packages/
├── components
│   └── HelloWorld.vue
└── index.ts

其中 HelloWorld 就是咱们要输入的组件。

index.ts代码如下：

import {App, Component} from 'vue';

interface FileType {[key: string]: Component;
}

const componentFiles: Record<string, FileType> = import.meta.globEager('./components/**.vue');

const componentList = Object.keys(componentFiles).map(item => {return componentFiles[item]?.default;
});

export default {
    name: 'dedeUI',
    install(app: App) {
        componentList.forEach(component => {app.component(component?.name as string, component);
        });
    }
}

这还没完，咱们还须要配置 @dede/app 的 package.json 文件，配置导出模块：

{
  "name": "@dede/app",
  "version": "0.0.0",
  "description": "dede app",
  "keywords": ["app"],
  "author": "","homepage":"",
  "license": "ISC",
  "directories": {"lib": "lib"},
  "files": ["dist"],
  "main": "./dist/app.umd.js",
  "module": "./dist/app.es.js",
  "exports": {
    ".": {
      "import": "./dist/app.es.js",
      "require": "./dist/app.umd.js"
    },
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },
  "publishConfig": {"access": "public"}
}

而后执行打包命令 npm run build，会看到在/dede-cli/packages/app 目录上面生成了一个 dist 文件夹，这个就是咱们打包须要导出的文件。

dist
├── app.es.js
├── app.umd.js
├── favicon.ico
└── style.css

这个时候曾经万事具备了，下一步只有搭建好 npm 公有仓库就能够上传包了。

如果你有本人的服务器能够在你的服务器上试试看。

进入服务器之后，装置 verdaccio 和pm2，装置 pm2 次要是为了治理 node 利用。

npm install verdaccio -g

npm install pm2 -g

胜利之后通过 pm2 启动verdaccio：

pm2 start verdaccio，

胜利当前你就能够通过 localhost:4873 拜访了，端口能够通过配置文件更改，这里不做细讲。通过晋升增加账号后就能够去发包了。

申请 git 代码仓库并增加近程仓库胜利后，在 dede-cli 目录增加 .npmrc 文件，配置 npm registry 为你的公有仓库地址：

registry=http://xxx/

git add .，git commit -m "project init"，

而后执行 lerna publish 遵循 semver 版本语义化标准抉择版本号，胜利当前进入到verdaccio 页面就能够看到本人公布的包了。

公布胜利当前，进入到 /dede-cli/packages/app/code 目录下执行 npm install @dede/app --registry=http://xxx/ 装置本人公布的包，而后在 main.ts 引入：

import {createApp} from 'vue';
import '@dede/app/dist/style.css';
import dedeUI from '@dede/app';
import App from './App.vue';
const app = createApp(App);
app.use(dedeUI);
app.mount('#app');

在 App.vue 组件中应用全局组件HelloWorld：

<template>
    <hello-world msg="Hello Vue 3 + TypeScript + Vite" />
</template>

<style>
#app {
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

执行 npm run dev 启动服务，页面完满出现~

这一套下来你对 npm 的包治理应该也有了进一步的意识，如果你们团队内有这个需要，不妨一试，毕竟工程化就是为了缩小人工操作所带来的失误危险和晋升开发、构建效率的。

关于vue3:用vitelerna配合verdaccio发布自己的前端包

前言

一、应用 lerna 治理包

二、应用 vite+vue3 开发包

三、应用 verdaccio 搭建 npm 公有仓库

四、公布并装置本人的包

总结