0x00 前言

本文將從結構、功能等方面講解下專案 vue-code-view 的搭建程序，您可以了解以下內容：

使用 vue cli 4從0搭建一個組件庫及細致配置資訊，
專案的多環境構建配置，
專案網站的發布部署、持續集成，
專案NPM包發布，
專案組件的自定義 Markdown 決議 loader，

本文算是 ??Element 2 原始碼學習系列的拓展篇內容，通過之前的文章了解了開源組件庫的結構原理后，自己也搭建個組件專案怎么辦？接下來就是實踐的程序，算是"知行合一"了吧！耐心讀完，相信會對您有所幫助!

0x01 專案概述

創建專案

本專案使用 Vue CLI 4.x 進行專案創建，

// 安裝環境 
npm install -g @vue/cli 
// 創建專案 
vue create vue-code-view

在終端中輸入命令后，按照以下步驟操作創建專案：

選擇手動選擇功能 Manually select features，
選中 Babel, Router, CSS Pre-processors,Linter / Formatter等功能，
選擇 vue 版本 2.X
選擇路由是否使用history模式，默認 yes，
選擇CSS 前處理器Sass/SCSS(with node-sass)，
選擇代碼風格、格式校驗 linter / formatter 配置ESLint + Prettier，
選擇校驗時機保存時檢測Lint on save
選擇 Babel, ESLint等組態檔存放在專用組態檔中 In dedicated config files，

配置多環境變數

在專案根目錄中新建 .env, .env.deploy,.env.production等檔案，

以 VUE_APP 開頭的變數會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中，代碼中可以通過 process.env.VUE_APP[xxx] 訪問，

NODE_ENV 和 BASE_URL 是兩個特殊變數，在代碼中始終可用，

.env
vue-cli-service serve 默認的本地開發環境配置

NODE_ENV = development
VUE_APP_PUBLIC_PATH = /

.env.production
vue-cli-service build 默認的環境配置（正式服務器）

NODE_ENV = production 
VUE_APP_PUBLIC_PATH = /
VUE_APP_ENV = pub

.env.deploy
用于 github pages 構建部署的環境配置，VUE_APP_PUBLIC_PATH 設定 /vue-code-view 用于虛擬目錄，

NODE_ENV = production 
VUE_APP_PUBLIC_PATH = /vue-code-view
VUE_APP_ENV = deploy

目錄結構調整

默認的 src 目錄下存放專案原始碼及需要參考的資源檔案，根目錄下新建 examples 檔案夾用于專案示例網站，將src 目錄下檔案移至 examples 檔案，src 目錄存放專案組件原始碼，

調整后根目錄檔案結構如下：

├── examples   // 專案示例網站
|  ├── App.vue
|  ├── assets
|  ├── components
|  ├── main.js
|  ├── router
|  └── views 
├── src       // 專案組件原始碼 
|  ├── fonts
|  ├── index.js
|  ├── locale
|  ├── mixins
|  ├── src
|  ├── styles
|  └── utils
├── public
├── package.json

配置基礎 vue.config.js

專案默認入口./src/main.js,配置如下：

{
  entry: {
    app: [
      './src/main.js'
    ]
  }
}

在根目錄下創建 vue.config.js 修改默認配置，

const path = require("path");
const resolve = (dir) => path.join(__dirname, dir);

module.exports = {
  configureWebpack: (config) => {
    // 專案入口
    config.entry.app = "./examples/main.js";
  },
  chainWebpack: (config) => {
    // 添加別名
    config.resolve.alias
      .set("vue$", "vue/dist/vue.esm.js")
      .set("@", resolve("examples"))
      .set("@assets", resolve("examples/assets"))
      .set("@src", resolve("src"))
      .set("@views", resolve("examples/views"))
      .set("@router", resolve("examples/router"))
      .set("@store", resolve("examples/store")); 
  },
};

運行 npm run serve ，專案網站正常運行，

0x02 專案構建

npm scripts 配置

調整 package.json 里的 scripts 配置腳本,并添加 --mode xxx 來選擇不同環境配置，

"scripts": { 
  // 開發環境 啟動專案示例網站
  "dev": "vue-cli-service serve ", 
  // 組件庫構建 
  "dist": "vue-cli-service build  --mode production --target lib --name vue-code-viewer --dest lib src/index.js",
  // 專案示例網站構建
  "deploy:build": "vue-cli-service build --mode deploy" 
}

組件構建

組件庫構建通過指定入口檔案src/index.js、設定引數選項，

用法：vue-cli-service build [options] [entry|pattern]

引數選項：
  --mode        指定環境模式 (默認值：production)
  --dest        指定輸出目錄 (默認值：dist) 
  --target      app | lib | wc | wc-async (默認值：app)
  --name        庫或 Web Components 模式下的名字 (默認值：package.json 中的 "name" 欄位或入口檔案名)

構建一個庫會輸出：

lib/vue-code-viewer.common.js：一個給打包器用的 CommonJS 包，
lib/vue-code-viewer.umd.js：一個直接給瀏覽器或 AMD loader 使用的 UMD 包，
lib/vue-code-viewer.umd.min.js：壓縮后的 UMD 構建版本，
lib/vue-code-viewer.css：提取出來的 CSS 檔案，

組件NPM包發布

配置 package.json 檔案中屬性值用于npm 發布，

name: 包名，該名字是唯一的，需要去npm registry查看名字是否已被使用，
version: 包版本號，版本號規則參考《語意化版本 2.0.0》，每次發布至 npm 需要修改版本號，不能和歷史版本號相同，
description: 包的描述，描述這個包的主要功能以及用途，
main: 入口檔案，該欄位需指向專案編譯后的包檔案，
unpkg: UMD模式入口包檔案
keyword：關鍵字，陣列、字串，
author：包的作者，
private：是否私有，需要修改為 false 才能發布到 npm
license：開源協議，
repository：包的Git Repo資訊，包括type和URL，
homepage：專案官網的url，

更新 package.json 檔案內容:

{
  "name": "vue-code-view",
  "version": "0.3.9",
  "description": "A code editor component based on Vue.js 2 ",
  "main": "lib/vue-code-viewer.common.js",
  "unpkg": "lib/vue-code-viewer.umd.js",
  "scripts": {},
  "dependencies": {},
  "peerDependencies": {},
  "devDependencies": {},
  "keywords": [
    "vue",
    "components",
    "codemirror",
    "code editor"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/andurils/vue-code-view.git"
  },
  "author": "andurils",
  "license": "MIT",
  "homepage": "https://andurils.github.io/vue-code-view"
}

加 .npmignore 檔案，設定忽略發布檔案，發布到 npm 中檔案，只保留有的 lib 目錄、package.json、README.md，

# 忽略目錄 
examples/
node_modules/
public/
build/
src/
dist/
deploy/
# 忽略指定檔案 
.browserslistrc 
.eslintignore 
.prettierignore 
.env
.env.*
*.js

接下來 npmjs.com 上注冊賬號登錄后，執行 npm publish 命令完成組件包發布操作，

發布成功后，進入組件的NPM首頁 npm/vue-code-view, 可以看到上面的專案配置資訊，

專案示例網站構建

更新 vue.config.js，運行 npm run deploy:build 構建專案示例網站輸出至 deploy 目錄下，

const path = require("path"); 
const resolve = (dir) => path.join(__dirname, dir); 
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);

module.exports = { 
  publicPath: process.env.VUE_APP_PUBLIC_PATH || "/",
  productionSourceMap: false,
  outputDir: process.env.VUE_APP_ENV === "deploy" ? "deploy" : "dist",  
  configureWebpack: (config) => {
    // 專案入口
    config.entry.app = "./examples/main.js"
  },
  ...
};

持續集成

使用 Travis CI的持續集成服務自動構建專案示例網站并部署至 gh-pages 分支，

根目錄下添加 .travis.yml檔案，指定了 Travis 的行為，通過設定一旦代碼倉庫有新的 Commit，Travis 就會去找這個檔案，執行里面的命令(執行構建、部署等操作)，
y

sudo: false
language: node_js
node_js: 14
install:
  - yarn 

script: npm run deploy:build
after_script: 
  - mkdir temp_web 
  - cd temp_web
  - git clone --depth 1 -b gh-pages --single-branch https://${TravisCI_Token}@${GH_REF} && cd vue-code-view 
  - echo 'copy && commit' 
  - rm -rf js fonts
  - cp -rf ../../deploy/** .
  - git config user.name "${U_NAME}"
  - git config user.email "${U_EMAIL}"
  - git add -A .
  - git commit -m ":construction_worker:- Build & Deploy by Travis CI"
  - git push origin gh-pages  
  - echo "DONE, Bye~"
  - exit 0

Travis CI專案構建后臺：

開啟構建壓縮

安裝相關插件，

# gzip webpack 4.x 對應 6.x版本 
npm i [email protected] -D 

# 代碼壓縮
npm i uglifyjs-webpack-plugin -D

配置 vue.config.js，開啟插件，

...
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV); 
// gzip壓縮  webpack 4.x 對應 6.x版本 cnpm i [email protected] --save-dev
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
// 代碼壓縮
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = { 
  ...
  configureWebpack: (config) => { 
    const plugins = []; 
    // 生產環境相關配置
    if (IS_PROD && process.env.VUE_APP_ENV === "pub") {
      plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path][base].gz",
          algorithm: "gzip",
          minRatio: 0.99,
          test: productionGzipExtensions,
          deleteOriginalAssets: false,
        })
      );
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            // 洗掉注釋
            output: {
              comments: false,
            },
            // 洗掉console debugger
            compress: {
              drop_debugger: true,
              drop_console: true, // console
              pure_funcs: ["console.log"], // 移除console
            },
            // 洗掉警告
            warnings: false,
          },
          sourceMap: false,
          parallel: true, //使用多行程并行運行來提高構建速度，默認并發運行數：os.cpus().length - 1，
        })
      );
    }
    config.plugins = [...config.plugins, ...plugins];
  },  
};

組件說明檔案

參考element 2的實作，自定義 build/md-loder對 Markdown 檔案進行決議渲染，將 examples\docs\zh-CN\example.md 編譯為 HTML，已在前文 04.封裝組件封裝、撰寫說明檔案中詳細說明,不再過多贅述，

配置 vue.config.js ，添加 .md 檔案的自定義 Markdown Loader，

module.exports = { 
  ...
  configureWebpack: (config) => { 
    config.resolveLoader.modules = ["node_modules", "./build/"]; // 自定義loader
  },
  chainWebpack: (config) => { 
    // Markdown Loader
    config.module
      .rule("md")
      .test(/\.md/)
      .use("vue-loader")
      .loader("vue-loader")
      .end()
      // 自定義loader
      .use("md-loader")
      .loader("md-loader")
      .end(); 
  },
};

examples\router\index.js配置路由:

const routes = [  
  {
    path: "/md",
    name: "Markdown",
    component: (r) =>
      require.ensure([], () => r(require("../docs/zh-CN/example.md"))),
  },
];

0x03 結尾

本篇幅主要按照專案從簡到繁的順尋逐步講解了各操作項及細節配置，下文將就組件實作原理詳細講解，

未完待續~

作者：Anduril

簡書傳送門：簡書/Anduril

掘金傳送門：掘金/Andurils

個人小站：anduril.cn

技術只有不沉浸其中才能對其更加公正看待！沒了狂熱和浮躁，去體會下開源下的語法魅力！這里沒有技術宗教的狂熱和鄙夷，沒有瘋狂的個人崇拜，只是一個技術人探索之路上對于美麗與丑陋的隨筆和感悟！

本文著作權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/345548.html

標籤：其他

上一篇：Vue Router 記住頁面滾動位置的簡單實作

下一篇：面試官：能用JS寫一個發布訂閱模式嗎？

從0到1搭建自己的組件(vue-code-view)庫(上)