前言
年前做了一个相似于用户画像的我的项目，性能比拟独立，而且可能被很多我的项目作为一个功能模块嵌入，所以很天然的就想到把这个我的项目做成一个组件输入。vue-cli提供库打包模式，所以我每次开发完只须要将打包后的文件拷贝到其余我的项目就能够高兴地应用了。然而随着要援用这个模块的我的项目增多，和这个我的项目本身的开发迭代，这种手动拷贝的形式就太蠢了。显然我须要一套成熟的包治理计划，然而因为种种原因我又不能将代码公布到公共的npm上，只能在公司的测试服务器上搭建公有npm仓库。
上面我将一步一步地记录如果开发一个本人的前端包，如何搭建一个公有npm仓库，并上传本人的前端包，最初下载并援用本人的前端包。
一、应用lerna治理包
lerna是什么我就不介绍了，如果你还不晓得就去看一下官网文档
-
全局装置
lernanpm 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
二、应用vite+vue3开发包
我在理论我的项目中用的是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搭建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的包治理应该也有了进一步的意识，如果你们团队内有这个需要，不妨一试，毕竟工程化就是为了缩小人工操作所带来的失误危险和晋升开发、构建效率的。
发表回复