一、初始化項(xiàng)目
npm create vite
選擇模板：
- 開發(fā)方法庫：選擇第一個Vanilla模板就可以了
-
開發(fā)組件庫：如果想開發(fā)基于vue的組件庫可直接選擇Vue模板
二酝惧、封裝方法或組件并添加打包配置
2.1 封裝方法庫
-
在根目錄下新建src文件夾崩瓤，并新建一個js文件寫入想要封裝的方法：
-
在main.js中引入引入封裝方法的js文件攻泼，并導(dǎo)出封裝的方法:
- 配置package.json
{
"name": "my-function-lib", // 包名寇窑，命名前可以先去npm官網(wǎng)中查看是否已有這個包名凤藏，如果已經(jīng)有的話就發(fā)布不了
"private": false, // 是否為私有包惋增，false則表示公開包
"version": "0.0.1", // 版本號叠殷，之后如果要更新，必須加大才能發(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è)置庫的入口文件
formats: ['es', 'cjs'], // 定義導(dǎo)出格式 包含 'es' 模塊格式林束，適用于 ES6 及以上版本，包含 'cjs' 模塊格式稽亏，適用于 CommonJS 規(guī)范
name: ''
},
},
})
2.2 封裝組件庫
-
在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)用添加全局樣式
// 定義一個安裝函數(shù)胖腾，用于將BtnTab組件注冊到Vue應(yīng)用中
const install = (app) => {
// 將BtnTab組件注冊為全局組件，使得在應(yīng)用的任何地方都可以使用這個組件
app.component('MyButton', MyButton)
}
// 默認(rèn)導(dǎo)出一個對象怎披，包含install方法胸嘁，允許外部通過'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', // 組件庫的名稱
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)入模塊時的入口文件
"require": "./dist/my-components-package.umd.cjs" // require方式引入模塊時的入口文件
}
},
"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è)置為官方源，否則登錄會報(bào)錯
// 官方鏡像源
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 （這個命令也需要npm源為官方源）
發(fā)布成功后登錄npm官網(wǎng)状飞，在自己的賬號上packages中就能看到自己發(fā)布的包了毫胜。
要點(diǎn)
main和module字段的意義
1. main:
main字段指定了包的入口點(diǎn)书斜，即其他程序要引用該包時使用的主文件。
傳統(tǒng)上酵使，main字段指向一個CommonJS模塊（使用require()引入）荐吉。
大多數(shù)Node.js應(yīng)用和傳統(tǒng)瀏覽器環(huán)境使用main字段引入包。
2. module:
module字段指定了一個ES6模塊（使用import/export語法）作為包的入口點(diǎn)口渔。
現(xiàn)代瀏覽器和一些Javascript打包工具（如Webpack样屠、Rollup）能夠識別并使用module字段來加載ES6模塊。
使用ES6模塊語法可以獲得更好的靜態(tài)分析和tree-shaking性能缺脉。
總的來說：
main是為了支持CommonJS模塊的傳統(tǒng)方式痪欲，module則是為了支持ES6模塊的現(xiàn)代方式
當(dāng)包同時提供CommonJS和ES6模塊時，通常會同時設(shè)置main和module字段攻礼。這樣可以讓應(yīng)用根據(jù)自身的打包工具和模塊系統(tǒng)來選擇合適的入口點(diǎn)业踢。
總結(jié)
npm 包其實(shí)就是一個組件或者方法或文件，使用npm的發(fā)布命令publish礁扮，其實(shí)本質(zhì)上就是把這些上傳到npm倉庫進(jìn)行統(tǒng)一化管理知举，當(dāng)你在開發(fā)項(xiàng)目的過程中，你可以根據(jù)自己的需求把相應(yīng)的包拉取到你的項(xiàng)目中進(jìn)行使用太伊；
