一、初始化項(xiàng)目
npm create vite
選擇模板：
- 開(kāi)發(fā)方法庫(kù)：選擇第一個(gè)Vanilla模板就可以了
-
開(kāi)發(fā)組件庫(kù)：如果想開(kāi)發(fā)基于vue的組件庫(kù)可直接選擇Vue模板
二、封裝方法或組件并添加打包配置
2.1 封裝方法庫(kù)
-
在根目錄下新建src文件夾，并新建一個(gè)js文件寫入想要封裝的方法：
-
在main.js中引入引入封裝方法的js文件，并導(dǎo)出封裝的方法:
- 配置package.json
{
"name": "my-function-lib", // 包名，命名前可以先去npm官網(wǎng)中查看是否已有這個(gè)包名，如果已經(jīng)有的話就發(fā)布不了
"private": false, // 是否為私有包，false則表示公開(kāi)包
"version": "0.0.1", // 版本號(hào)，之后如果要更新，必須加大才能發(fā)布
"type": "module", // 指定項(xiàng)目的模塊類型為模塊
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
// 指定發(fā)布的文件夾
"files": [
"dist"
],
"main": "dist/my-function-lib.cjs", // 指定項(xiàng)目的主入口文件（CommonJS）
"module": "dist/my-function-lib.js", // 指定項(xiàng)目的模塊入口文件（ES Module）
"devDependencies": {
"vite": "^5.4.8"
}
}
- 創(chuàng)建vite.config.js，并加入配置
import { defineConfig } from 'vite'
export default defineConfig({
build: {
outDir: 'dist', // 構(gòu)建輸出目錄設(shè)置為'dist'
target: 'es2020', // 構(gòu)建目標(biāo)設(shè)置為'es2020'
lib: {
entry: 'main.js', // 設(shè)置庫(kù)的入口文件
formats: ['es', 'cjs'], // 定義導(dǎo)出格式 包含 'es' 模塊格式，適用于 ES6 及以上版本，包含 'cjs' 模塊格式，適用于 CommonJS 規(guī)范
name: ''
},
},
})
2.2 封裝組件庫(kù)
-
在src文件夾新建package文件夾，并創(chuàng)建.vue文件寫入想要封裝的代碼:
在package新建js文件，引入封裝的組件
import MyButton from './my-button/index.vue' // 導(dǎo)入自定義的Vue組件
import './index.css' // 導(dǎo)入CSS樣式文件，為應(yīng)用添加全局樣式
// 定義一個(gè)安裝函數(shù)，用于將BtnTab組件注冊(cè)到Vue應(yīng)用中
const install = (app) => {
// 將BtnTab組件注冊(cè)為全局組件，使得在應(yīng)用的任何地方都可以使用這個(gè)組件
app.component('MyButton', MyButton)
}
// 默認(rèn)導(dǎo)出一個(gè)對(duì)象，包含install方法，允許外部通過(guò)'default'關(guān)鍵字導(dǎo)入并安裝BtnTab組件
export default {
install,
}
// 單獨(dú)導(dǎo)出BtnTab組件，允許外部按需導(dǎo)入
export { BtnTab }
- 配置vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
outDir: 'dist',
lib: {
entry: 'src/package/index.js', // 入口文件路徑
name: 'my-components-package', // 組件庫(kù)的名稱
fileName: 'my-components-package', // 打包后的文件名
},
rollupOptions: {
// 處理不想打包的依賴
external: ['vue'],
output: {
globals: {
vue: 'Vue',
},
},
},
},
})
- 運(yùn)行npm run build命令打包
- 配置package.json
{
"name": "my-components-package",
"private": false,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
// 指定包含的文件或文件夾
"files": [
"dist"
],
"main": "dist/my-components-package.umd.cjs",
"module": "dist/my-components-package.js",
"exports": {
".": {
"import": "./dist/my-components-package.js", // import導(dǎo)入模塊時(shí)的入口文件
"require": "./dist/my-components-package.umd.cjs" // require方式引入模塊時(shí)的入口文件
}
},
"dependencies": {
"vue": "^3.4.37"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.2",
"vite": "^5.4.1"
}
}
- 編寫README.md文件。
三、發(fā)布到npm
3.1 登錄npm
在終端輸入npm login ,在登錄前一定要將npm源設(shè)置為官方源，否則登錄會(huì)報(bào)錯(cuò)
// 官方鏡像源
npm config set registry https://registry.npmjs.org/
// 淘寶鏡像源
npm config set registry https://registry.npmmirror.com/
檢查當(dāng)前npm源：
npm config get registry
3.2 發(fā)布包
在終端輸入npm publish （這個(gè)命令也需要npm源為官方源）
發(fā)布成功后登錄npm官網(wǎng)，在自己的賬號(hào)上packages中就能看到自己發(fā)布的包了。
要點(diǎn)
main和module字段的意義
1. main:
main字段指定了包的入口點(diǎn)，即其他程序要引用該包時(shí)使用的主文件。
傳統(tǒng)上，main字段指向一個(gè)CommonJS模塊（使用require()引入）。
大多數(shù)Node.js應(yīng)用和傳統(tǒng)瀏覽器環(huán)境使用main字段引入包。
2. module:
module字段指定了一個(gè)ES6模塊（使用import/export語(yǔ)法）作為包的入口點(diǎn)。
現(xiàn)代瀏覽器和一些Javascript打包工具（如Webpack、Rollup）能夠識(shí)別并使用module字段來(lái)加載ES6模塊。
使用ES6模塊語(yǔ)法可以獲得更好的靜態(tài)分析和tree-shaking性能。
總的來(lái)說(shuō)：
main是為了支持CommonJS模塊的傳統(tǒng)方式，module則是為了支持ES6模塊的現(xiàn)代方式
當(dāng)包同時(shí)提供CommonJS和ES6模塊時(shí)，通常會(huì)同時(shí)設(shè)置main和module字段。這樣可以讓應(yīng)用根據(jù)自身的打包工具和模塊系統(tǒng)來(lái)選擇合適的入口點(diǎn)。
總結(jié)
npm 包其實(shí)就是一個(gè)組件或者方法或文件，使用npm的發(fā)布命令publish，其實(shí)本質(zhì)上就是把這些上傳到npm倉(cāng)庫(kù)進(jìn)行統(tǒng)一化管理，當(dāng)你在開(kāi)發(fā)項(xiàng)目的過(guò)程中，你可以根據(jù)自己的需求把相應(yīng)的包拉取到你的項(xiàng)目中進(jìn)行使用；
