05.ElementUI原始碼學習:專案釋出配置(github pages&npm package)

Anduril發表於2021-04-27

0x00.前言

書接上文。專案第一個元件已經封裝好,說明文件也已編寫好。下面需要將說明文件釋出到外網上,以此來展示和推廣專案,使用 Github Pages功能實現。同時將元件釋出之 npm 上,方便直接在專案中安裝使用。

0x01.Github Pages釋出

進入專案的 Github repo,點選右上角的 Settings 選項。

微信截圖_20210426160639.png

點選左側選單的 Pages 選項,右側顯示專案 Github Pages 初始配置。source 配置項值為 None 說明此功能尚未開啟。

微信截圖_20210426161236.png

點選 source 配置項下拉選單,只有 master (主分支/預設分支)、None(關閉功能) 兩個選項。

微信截圖_20210426161933.png

root 路徑

選擇 master 分支後,可以指定釋出檔案源的路徑,預設專案根路徑/(root),還可以指定根路徑下的docs資料夾;然後點選 Save 按鈕儲存,就會提示專案的釋出地址 https://andurils.github.io/code-examples/

微信截圖_20210426165638.png

開啟網址若未成功解析,需要等待1-2分鐘,再次重新整理頁面即可(當前根目錄下只有readme.md檔案,頁面呈現內容為此檔案)。

Animation12.gif

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 路徑,在配置裡更改如下。
微信截圖_20210427090129.png

建立 build\webpack.docs.js 檔案,複製 build\webpack.config.js檔案內容,修改 output/path屬性值由 distdocs

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 

瀏覽器輸入地址,開啟頁面效果如下:

Animation12.gif

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"

微信截圖_20210426133107.png

開啟 Github Pages配置,此時選項裡出現了 gh-pages ,選擇該分支即可。

微信截圖_20210427090211.png

gh-pages -d dist等同於建立了一個gh-pages分支並將 dist 檔案內容提交至該分支。
同理可以在Git Repo 建立任何分支現在,直接通過配置可以指定具體的分支/路徑(可以使用 mastergh-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

page11.gif

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選項內容釋出。

微信截圖_20210427210907.png

npm 釋出

首先 npmjs.com 上註冊一個賬號,確保 npm 使用的是原映象。

npm config set registry http://registry.npmjs.org 

然後在命令列視窗跳轉至專案路徑下, 執行 npm login 登入授權。

微信截圖_20210427205726.png

執行 npm publish 命令釋出元件包。

微信截圖_20210427171347.png

釋出成功後,進入元件包資訊頁面 https://www.npmjs.com/package/me-vue-ui, 可以看到上面的專案配置資訊 。

微信截圖_20210427211808.png

npm install 測試

使用vue cli 建立一個專案,引用剛釋出的元件包。全域性註冊元件,頁面引入元件,重新整理頁面即可看到釋出的元件。

npm install me-vue-ui -S

操作效果如下:
page111111.gif

0x03.總結

從專案初始化到元件編寫釋出用了5篇文章的篇幅,耐心讀完,你會發現很簡單,沒有想象中那麼神祕高不可攀。由於前端技術的快速發展,版本的更迭,很多外掛的配置讓人頭大。網路上的方案要不是玄學能用就行,為什麼不知道;要麼就是使用方法已經廢棄。所以文章花了不少篇幅進行了知識梳理,也算是自我的一種回顧。也希望你有所收穫!

接下來將對 element-ui 架構更進一步的拆解學習,一步步引入(copy)其工程化、元件、文件。

0x04.示例程式碼

Github Repo
npm demo

0x05.參考

Github Pages 釋出配置
語義化版本 2.0.0
webpack配置

相關文章