上一節我們書寫了 button icon npm vue3
config 檔案配置
- 擷取
packages
index.js
function resolve(dir) {
return path.resolve(__dirname, dir)
}
function getEntries(path) {
// 整理需要按需加載的檔案，dir為各元件所在的共同目錄
let files = fs.readdirSync(resolve(path))
const entries = files.reduce((ret, item) => {
if (item == 'utils') return ret
const itemPath = join(path, item)
const isDir = fs.statSync(itemPath).isDirectory()
if (isDir) {
// 路徑拼接，得到元件所在位址
ret[item] = resolve(join(itemPath, 'index.js'))
} else {
const [name] = item.split('.')
ret[name] = resolve(`${itemPath}`)
}
return ret
}, {})
return entries
} - 配置打包項
const buildConfig = {
// 輸出的目錄名
outputDir: 'lib',
// 關閉 sourcemap
productionSourceMap: false,
configureWebpack: {
entry: {
// 多入口檔案， packages 目錄下
...getEntries('packages')
},
output: {
// 輸出檔案以 d- 開頭
filename: 'd-[name]/index.js',
libraryTarget: 'commonjs2'
},
resolve: {
alias: {
packages: resolve('packages')
}
}
},
css: {
sourceMap: true,
extract: {
// 打包輸出的樣式檔案
filename: 'style/d-[name].css' //在lib檔案夾中建立style檔案夾中，生成對應的css檔案。
}
},
// webpack 解析
chainWebpack: config => {
config.module
.rule('js')
.include.add('/packages')
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
return options
})
// 删除不必要的配置
config.optimization.delete('splitChunks')
config.plugins.delete('copy')
config.plugins.delete('html')
config.plugins.delete('preload')
config.plugins.delete('prefetch')
config.plugins.delete('hmr')
config.entryPoints.delete('app')
// 字型檔案配置
config.module
.rule('fonts')
.use('url-loader')
.tap(option => {
option.fallback.options.name = 'static/fonts/[name].[ext]'
return option
})
}
} 打包指令
我們可以直接執行
npm run build
，這樣會把我們每個元件打包出來，但我們還要一個總包，包括所有元件和樣式的檔案，我們我們添加新的指令，
打包成庫的配置"scripts": {
...
"lib": "vue-cli-service build --target lib packages/index.js && vue-cli-service build --no-clean"
}
--no-clean 表示打包時不删除現有的 lib 檔案，為了後面的按需打包 執行
npm run lib
，我們可以看到執行完全庫打包後繼續執行元件的單獨打包
配置 package.json
{
"name": "day-ui", // 包名
"version": "0.0.1", // 包的版本，每次釋出需要修改
"description": "A Personal Learning UI library For Vue",// 描述
"main": "lib/day-ui.umd.min.js"，// 包的入口檔案
"author": { // 作者資訊
"name": "",
"email": ""
},
// 上傳的檔案
"files": [
"lib",
"packages",
"package.json",
"typings",
"README.md"
],
// ts 項目類型檔案
"typings": "typings/index.d.ts",
"style": "lib/day-ui.css"，
"repository": {
"url": ""// 倉庫位址
}，
"keywords": [
"UI",
"Vue",
"UI-Library"
]
} 如果有需要不上傳的檔案，也可以建立
.npmignore
檔案，忽略不釋出的檔案
釋出
- 上傳到
npm
- 第一次的話有些配置
npm login
-
npm publish
大家注冊完之後一定要用官網郵箱驗證，否則釋出的時候會報異常
使用
yarn add day-ui -S
，我們在
main.ts
中引入
全部引入
在頁面中使用：
<DButton icon="search">button</DButton> 按需引入
安裝插件
npm i babel-plugin-import -D
,
配置
babel.config.js
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
"import",
{
libraryName: 'day-ui',
// 預設 DButton -> d-button
customStyleName: (name) => {
return `day-ui/lib/style/${name}.css`;
},
},
],
]
} 我們在頁面中引入
import {DButton, DIcon} from "day-ui"
，插件會幫我們預設引入元件和樣式
可能在項目中使用是會遇到如下的問題，這是由于有兩個
Vue
執行個體導緻的，我們的元件庫中把
Vue
安裝在開發依賴中，同時
packages.json
中配置
peerDependencies
vue.config.js
externals
....
"peerDependencies": {
"vue": "^3.0.7"
},
...
externals: [
{
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue'
}
}
] 元件庫搭建的整體流程到這裡就結束了，後面還會寫每個元件分享，學習
element-plus
内部實作，更深入學習了解
vue3
的使用。
如果文章對您有幫助的話歡迎
github
支援：
github npm如果文章對你有幫助歡迎轉發，有什麼意見歡迎留言。