0x00.前言
書接上文，專案第一個組件已經封裝好，說明檔案也已撰寫好，下面需要將說明檔案發布到外網上，以此來展示和推廣專案，使用 Github Pages功能實作，同時將組件發布之 npm 上，方便直接在專案中安裝使用，
0x01.Github Pages發布
進入專案的 Github repo,點擊右上角的 Settings 選項，
點擊左側選單的 Pages 選項，右側顯示專案 Github Pages 初始配置，source 配置項值為 None 說明此功能尚未開啟，
點擊 source 配置項下拉選單,只有 master (主分支/默認分支)、None(關閉功能) 兩個選項，
root 路徑
選擇 master 分支后，可以指定發布檔案源的路徑，默認專案根路徑/(root),還可以指定根路徑下的docs檔案夾；然后點擊 Save 按鈕保存,就會提示專案的發布地址 https://andurils.github.io/code-examples/ ，
打開網址若未成功決議，需要等待1-2分鐘，再次重繪頁面即可（當前根目錄下只有readme.md檔案,頁面呈現內容為此檔案），
README.md 檔案內容：
# 代碼示例
## ElementUI 原始碼學習:從零開始搭建 Vue 組件庫匯總
1. [0x01.專案初始化和 webpack 配置](https://juejin.cn/post/6950905030635421710)
2. [0x02.babel 配置](https://juejin.cn/post/6951215878928678948)
3. [03.ElementUI 原始碼學習:代碼風格檢查和格式化配置（ESlint ＆ Prettier）](https://juejin.cn/post/6951808773354684447)
4. [04.ElementUI 原始碼學習:組件封裝、說明檔案的撰寫](https://juejin.cn/post/6953614014546968589)
docs 路徑
作為一個開發分支根路徑下放置發布檔案，管理起來就比較混亂了，若不想維護新的分支用作靜態網站發布，可以使用當前分支的 docs 路徑,在配置里更改如下，
創建 build\webpack.docs.js 檔案，復制 build\webpack.config.js檔案內容，修改 output/path屬性值由 dist 至 docs，
module.exports = {
...
output: {
path: path.resolve(process.cwd(), 'docs'),
...
},
...
}
在package.json 檔案中的 npm scripts添加新的編譯命令，將組件說明檔案打包至 docs 路徑下，
...
"scripts": {
...
"build:docs": "cross-env NODE_ENV=development webpack --config build/webpack.docs.js",
...
},
...
至此將 docs 下的檔案上傳至 Github 即可，由于本專案路徑為/learning-element2/step03,所以需要手動將 docs 內容復制至 Github 根目錄下，Github Repo 最新目錄結構如下：
├─docs
├─learning-element2
├─LICENSE
├─README.md
瀏覽器輸入地址,打開頁面效果如下：
gh-pages 分支
gh-pages 分支大家應該不陌生，按照早期的約定靜態網站發布需要創建該分支,才能使用 Github Pages功能，接下將介紹如何快速的使用 gh-pages 進行專案發布，
先安裝 gh-pages 插件， 在 npm scripts添加部署命令，
// 安裝插件
npm install -D gh-pages
// package.json 添加部署命令
"scripts": {
"deploy": "gh-pages -d dist"
}
然后編譯打包專案 npm run build:dist， 最后運行部署命令npm run deploy 進行專案檔案發布，發布成功控制臺顯示 Published，
"deploy": "gh-pages -d dist"
打開 Github Pages配置，此時選項里出現了 gh-pages ，選擇該分支即可，
gh-pages -d dist等同于創建了一個gh-pages分支并將dist檔案內容提交至該分支，
同理可以在Git Repo創建任何分支現在,直接通過配置可以指定具體的分支/路徑（可以使用master、gh-pages之外的任何分支），
0x02.npm 發布組件包
webpack配置
安裝編譯進度條插件
npm i -D progress-bar-webpack-plugin
創建 build\webpack.common.js，采用 commonjs2 規范構建一個全量的包，
const path = require('path');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const config = require('./config');
module.exports = {
mode: 'production',
entry: {
app: ['./src/index.js'], // Entry descriptor 傳入一個物件 ./src/index.js
},
output: {
path: path.resolve(process.cwd(), './lib'), // 絕對路徑
publicPath: '/dist/', // 相對于服務(server-relative)
filename: 'me-vue-ui.common.js',
chunkFilename: '[id].js',
library: {
type: 'commonjs2', //配置將庫暴露的方式
export: 'default', // 指定哪一個匯出應該被暴露為一個庫
},
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: config.alias,
modules: ['node_modules'],
},
// externals: config.externals, //外部擴展
performance: {
// 控制 webpack 如何通知「資源(asset)和入口起點超過指定檔案限制」
hints: false, // 不展示警告或錯誤提示
},
// 可以在統計輸出里指定你想看到的資訊
stats: {
children: false, // 是否添加關于子模塊的資訊
},
optimization: {
//告知 webpack 使用 TerserPlugin 或其它在 optimization.minimizer 定義的插件壓縮 bundle
minimize: false,
},
module: {
rules: [
{
test: /\.(jsx?|babel|es6)$/,
include: process.cwd(),
exclude: config.jsexclude,
loader: 'babel-loader',
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false,
},
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: path.posix.join('static', '[name].[hash:7].[ext]'),
},
},
],
},
plugins: [new ProgressBarPlugin(), new VueLoaderPlugin()],
};
在 npm scripts添加組件打包命令，生成至 lib 目錄下，
...
"scripts": {
...
"dist": "webpack --config build/webpack.common.js ",
...
},
...
輸入命令 npm run dist 生成組件打包檔案 lib\me-vue-ui.common.js，
將 examples\main.js 檔案中的組件參考 由 '../src/index' 替換成 '../lib/me-vue-ui.common'，
// examples\main.js
// import MeUI from '../src/index';
import MeUI from '../lib/me-vue-ui.common';
輸入命令 npm run dev 運行專案，專案正常啟動無錯誤，則組件打包成功，
npm 配置
配置 package.json 檔案中屬性值用于npm 發布，
- name: 包名，該名字是唯一的，需要去npm registry查看名字是否已被使用，
- version: 包版本號，版本號規則參考《語意化版本 2.0.0》，每次發布至 npm 需要修改版本號，不能和歷史版本號相同，
- description: 包的描述，描述這個包的主要功能以及用途，
- main: 入口檔案，該欄位需指向專案編譯后的包檔案，
- keyword：關鍵字，陣列、字串，
- author：包的作者，
- private：是否私有，需要修改為 false 才能發布到 npm
- license： 開源協議，
- repository：包的Git Repo資訊，包括type和URL，
- homepage：專案官網的url，
更新 package.json 檔案內容，
{
"name": "me-vue-ui",
"version": "0.1.2",
"description": "A Vue.js 2.X UI Toolkit for Web",
"main": "lib/me-vue-ui.common.js",
"keyword": [
"me-vue",
"vuejs",
"components",
"ui-kit"
],
"repository": {
"type": "git",
"url": "git+https://github.com/andurils/code-examples.git"
},
"author": "anduril",
"license": "MIT",
"homepage": "https://andurils.github.io/code-examples"
}
添加 .npmignore 檔案，設定忽略發布檔案，發布到 npm 中檔案，只保留有的 lib 目錄、package.json、README.md，
# 忽略目錄
build/
dist/
examples/
packages/
public/
src/
test/
docs/
# 忽略指定檔案
.eslintignore
.prettierignore
.eslintrc.js
.prettierrc.js
babel.config.json
更新README.md內容，會作為npm包的 Readme Tab選項內容發布，
npm 發布
首先 npmjs.com 上注冊一個賬號，確保 npm 使用的是原鏡像，
npm config set registry http://registry.npmjs.org
然后在命令列視窗跳轉至專案路徑下， 運行 npm login 登錄授權，
執行 npm publish 命令發布組件包，
發布成功后，進入組件包資訊頁面 https://www.npmjs.com/package/me-vue-ui, 可以看到上面的專案配置資訊 ，
npm install 測驗
使用vue cli 創建一個專案，參考剛發布的組件包，全域注冊組件，頁面引入組件，重繪頁面即可看到發布的組件，
npm install me-vue-ui -S
操作效果如下：
0x03.總結
從專案初始化到組件撰寫發布用了5篇文章的篇幅，耐心讀完，你會發現很簡單，沒有想象中那么神秘高不可攀，由于前端技術的快速發展，版本的更迭，很多插件的配置讓人頭大，網路上的方案要不是玄學能用就行，為什么不知道；要么就是使用方法已經廢棄，所以文章花了不少篇幅進行了知識梳理，也算是自我的一種回顧，也希望你有所識訓！
接下來將對 element-ui 架構更進一步的拆解學習，一步步引入（copy）其工程化、組件、檔案，
0x04.示例代碼
Github Repo
npm demo
0x05.參考
Github Pages 發布配置
語意化版本 2.0.0
webpack配置
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/280912.html
標籤：其他