目錄
前言介紹
一、創(chuàng)建一個(gè)vite項(xiàng)目
1、使用創(chuàng)建命令：
?2、選擇others
3、?模板選擇library
4、選擇開發(fā)語言
?編輯?二、安裝依賴
三、目錄介紹
1、vite.config.ts打包文件
2、package.json命令配置文件
三、發(fā)布npm
1、注冊(cè)npm賬號(hào)
2、設(shè)置npm源
3、登錄到npm
4、推送到npm倉(cāng)庫
5、查看npm包
前言介紹
最近，公司項(xiàng)目上需要把很多公用函數(shù)封裝起來，作為一個(gè)公共的庫使用。以前的做法是使用webpack或者Rollup。Rollup和Webpack都是常用的JavaScript模塊打包工具，用于構(gòu)建現(xiàn)代化的Web應(yīng)用程序。但是，不管是webpack或者Rollup配置起來都很復(fù)雜，使用起來不是順手。
經(jīng)過一番折騰，發(fā)現(xiàn)vite也可以。大多數(shù)同學(xué)可能使用vite作為腳手架去構(gòu)建vue、react開發(fā)應(yīng)用。其實(shí)，vite也可以作為JavaScript模塊打包工具，構(gòu)建一個(gè)JavaScript庫，并且使用起來容易上手，配置也簡(jiǎn)單，打包速度很快，并發(fā)布到npm上。
Vite是一種新型前端構(gòu)建工具，能夠顯著提升前端開發(fā)體驗(yàn)。它主要由兩部分組成：
-
一個(gè)開發(fā)服務(wù)器，它基于?原生 ES 模塊?提供了?豐富的內(nèi)建功能，如速度快到驚人的?模塊熱更新（HMR）。
-
一套構(gòu)建指令，它使用?Rollup?打包你的代碼，并且它是預(yù)配置的，可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過的靜態(tài)資源。
Vite 是一種具有明確建議的工具，具備合理的默認(rèn)設(shè)置。您可以在?功能指南?中了解 Vite 的各種可能性。通過?插件，Vite 支持與其他框架或工具的集成。如有需要，您可以通過?配置部分?自定義適應(yīng)你的項(xiàng)目。
Vite 還提供了強(qiáng)大的擴(kuò)展性，可通過其?插件 API?和?JavaScript API?進(jìn)行擴(kuò)展，并提供完整的類型支持。其他的關(guān)于vite的介紹歡迎同學(xué)上官網(wǎng)去學(xué)習(xí)。下面咱們直接上手。
一、創(chuàng)建一個(gè)vite項(xiàng)目
1、使用創(chuàng)建命令：
pnpm create vite這里不要選擇開發(fā)框架而是選擇Others 。如下圖所示：
?2、選擇others
3、?模板選擇library
這library的意思是軟件庫，正好我們開發(fā)的就是一個(gè)軟件庫。
4、選擇開發(fā)語言
?開發(fā)語言這里選擇Typescript.
?二、安裝依賴
pnpm install?依賴安裝完畢后，一個(gè)js庫開發(fā)環(huán)境就搭建起來了。
三、目錄介紹
1、vite.config.ts打包文件
import { defineConfig } from 'vite'
export default defineConfig({
build: {
lib: {
entry: './lib/main.ts',
name: 'Counter',
fileName: 'counter'
}
}
})
2、package.json命令配置文件
{
"name": "vite-roll",
"private": true,
"version": "0.0.0",
"type": "module",
"files": [
"dist",
"index.d.ts"
],
"main": "./dist/counter.umd.cjs",
"module": "./dist/counter.js",
"types": "./index.d.ts",
"exports": {
"types": "./index.d.ts",
"import": "./dist/counter.js",
"require": "./dist/counter.umd.cjs"
},
"scripts": {
"dev": "vite",
"build": "tsc && vite build"
},
"devDependencies": {
"typescript": "^5.3.3",
"vite": "^5.0.10"
}
}從以上兩個(gè)文件中可以看出，vite簡(jiǎn)直就是為了開發(fā)一個(gè)js庫，并且發(fā)布到npm上而準(zhǔn)備的。
三、發(fā)布npm
1、注冊(cè)npm賬號(hào)
想要發(fā)布到npm倉(cāng)庫，就必須要有一個(gè)賬號(hào)，先去npm官網(wǎng)注冊(cè)一個(gè)賬號(hào)，注意記住用戶名、密碼和郵箱，發(fā)布的時(shí)候可能會(huì)用到。
2、設(shè)置npm源
在國(guó)內(nèi)很多小伙伴喜歡把本地的npm鏡像源采用的是淘寶鏡像源或者其它的，如果想要發(fā)布npm包，我們得吧我們得npm源切換為官方得源，命令如下：
npm config set registry=https://registry.npmjs.org3、登錄到npm
在打包后的文件根目錄打開終端，輸入npm login登錄到官網(wǎng)
完成如下圖步驟就成功登陸了
4、推送到npm倉(cāng)庫
輸入npm publish就可以正式發(fā)布到npm倉(cāng)庫了
注意：發(fā)布前要保證沒有相同的包名，否則無法發(fā)布，每次發(fā)布的版本號(hào)必須不同
5、查看npm包
上傳成功后可以在npm官網(wǎng)上通過自己設(shè)置的keywords關(guān)鍵字查到自己上傳的組件
發(fā)布成功后就可以使用npm命令行下載使用了。
最后附上發(fā)布npm安裝包，package.json文件完整配置：文章來源：http://www.zghlxwxcb.cn/news/detail-822950.html
{
"name": "array-device",
"version": "1.1.2",
"description": "Handle your array objects with ease",
"type": "module",
"files": [
"dist",
"index.d.ts"
],
"main": "./dist/array-device.umd.js",
"module": "./dist/array-device.es.js",
"types": "./index.d.ts",
"exports": {
"types": "./index.d.ts",
"import": "./dist/array-device.es.js",
"require": "./dist/array-device.umd.js"
},
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build"
},
"keywords": [
"array",
"reduce",
"intersection",
"select"
],
"author": "patton",
"license": "ISC",
"repository": {
"type": "git",
"url": "https://github.com/renleiabc/array-device.git"
},
"bugs": {
"url": "https://github.com/renleiabc/array-device/issues"
},
"devDependencies": {
"@types/node": "^20.10.8",
"@typescript-eslint/parser": "^6.18.1",
"@vitejs/plugin-vue": "^5.0.3",
"eslint": "^8.56.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-vue": "^9.20.0",
"prettier": "^3.1.1",
"typescript": "^5.3.3",
"vite": "^5.0.10",
"vue": "^3.4.8",
"vue-tsc": "^1.8.27"
}
}
接下來，開發(fā)屬于你自己的js庫吧文章來源地址http://www.zghlxwxcb.cn/news/detail-822950.html
到了這里，關(guān)于如何使用vite框架封裝一個(gè)js庫，并發(fā)布npm包的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
