12 - Vue3 UI Framework - 打包發佈

基礎組件庫先做到這個階段，後面我會繼續新增、完善

接下來，我們對之前做的組件進行打包發佈到 npm

返回閱讀列表點擊 這裏

組件庫優化

通用層疊樣式表

我想大家都注意到了，前面我們在寫組件的時候，scss 中類的命名都是 jeremy-x 這樣的形式，這是爲了用選擇器來做到統一配置。

如何配置

我們在 src/lib 目錄下，創建一個 jeremy.scss 的文件，編寫如下代碼：

[class^="jeremy-"],[class*=" jeremy-"]* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
  "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB",
  "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
  "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
  SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}

注意

前綴改成您的項目標識就可以了，我這裏是 jeremy

入口統一

我們需要告訴打包器，那些內容是需要暴露的，所以這裏我們再在 src/lib 目錄下創建一個 index.ts 文件，然後將需要打包的組件進行彙總導入和導出。

import JeremyButton from './Button.vue'
import JeremyCard from './Card.vue'
import JeremyDialog from './Dialog.vue'
import JeremyInput from './Input.vue'
import JeremySwitch from './Switch.vue'
import JeremyTable from './Table.vue'
import JeremyTab from './Tab.vue'
import JeremyTabs from './Tabs.vue'

export { JeremyButton, JeremyCard, JeremyDialog, JeremyInput, JeremySwitch, JeremyTable, JeremyTab, JeremyTabs, }
export { createDialog as createDialog } from './createDialog'

export default {
  install: Vue => {
    const components = [JeremyButton, JeremyCard, JeremyDialog, JeremyInput, JeremySwitch, JeremyTable, JeremyTab, JeremyTabs]
    components.forEach(item => {
      Vue.component(item.name, item)
    })
  }
}

注意

這裏的 install 方法是讓用戶能夠完整引入組件的必要方法

這裏的 export 是用於按需引入的，另外，要想實現用戶能夠部分引入組件，還必須在每個子組件中定義 install 方法

示例

完整引入

import { createApp } from 'vue';
import App from './App.vue';
import JeremyUI from 'jeremy-ui';
import 'jeremy-ui/lib/jeremy.css';

const app = createApp(App);
app.use(JeremyUI);
app.mount('#app');

按需引入

import { createApp } from 'vue';
import App from './App.vue';
import { JeremyButton, JeremyCard } from 'jeremy-ui';
import 'jeremy-ui/lib/jeremy.css';

const app = createApp(App);

app.use(JeremyButton);
app.use(JeremyCard);

app.mount('#app');

子組件示例

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script lang="ts">
declare const props: {
  title: string;
};

export default {
  install: function (Vue) {
    Vue.component(this.name, this);
  },
  name: "JeremyTab",
  props: {
    title: {
      type: String,
      default: "標籤頁",
    },
  },
};
</script>

註冊 NPM 賬戶

既然要發佈到 npm ，那麼首先我們要有一個 npm 賬戶，如果沒有可以點擊 官網 進行註冊。

注意

一定要記好，用戶名、密碼和郵箱！

註冊完成後，一定要完成郵箱認證！

郵箱認證後，登錄顯示如下，這裏的 2FA 暫時可以忽略，不過後面儘量完成認證。

配置打包

首先，要清楚我們的項目是基於 Vite 的，也就是說，是一個由原生 ESM 驅動的 Web 開發構建工具構建的。在選擇構建工具的時候也最好可以選擇基於 ESM 的工具。

所以，我們選擇 Rollup 進行打包，是因爲 Rollup 是基於 ES2015 的 JavaScript 打包工具。它將小文件打包成一個大文件或者更復雜的庫和應用，打包既可用於瀏覽器和 Node.js 使用。 Rollup 最顯著的地方就是能讓打包文件體積很小。相比其他 JavaScript 打包工具，Rollup 總能打出更小，更快的包。因爲 Rollup 基於 ES2015 模塊，比 Webpack 和 Browserify 使用的 CommonJS 模塊機制更高效。

配置 Rollup

我們在項目的根目錄下創建 rollup.config.js 文件，代碼如下：

import esbuild from 'rollup-plugin-esbuild'
import vue from 'rollup-plugin-vue'
import scss from 'rollup-plugin-scss'
import dartSass from 'sass';
import { terser } from "rollup-plugin-terser"

export default {
  // 主入口配置
  input: 'src/lib/index.ts',
  output: [{
    globals: {
      // 全局依賴
      vue: 'Vue'
    },
    // 項目名稱
    name: 'Jeremy',
    // 輸出文件名
    file: 'lib/jeremy.js',
    // 輸出文件格式，使用 es module
    format: 'es',
    // 壓縮文件大小
    plugins: [terser()]
  }, {
    globals: {
      vue: 'Vue'
    },
    name: 'Jeremy',
    // 輸出文件格式，使用 umd
    file: 'lib/jeremy.umd.js',
    format: 'umd',
    plugins: [terser()]
  },],
  plugins: [
    vue({
      include: /\.vue$/,
    }),
    scss({ include: /\.scss$/, sass: dartSass }),
    esbuild({
      include: /\.[jt]s$/,
      minify: process.env.NODE_ENV === 'production',
      // 降爲 es6 語法
      target: 'es2015'
    }),
  ],
}

通過配置我們指導 rollup 依賴如下 5 個包

1. sass
2. rollup-plugin-esbuild
3. rollup-plugin-vue
4. rollup-plugin-scss
5. rollup-plugin-terser

我們通過 npm 進行安裝，在項目根目錄下執行 bash ，並運行如下命令：

npm install sass -D
npm install rollup-plugin-esbuild -D
npm install rollup-plugin-vue -D
npm install rollup-plugin-scss -D
npm install rollup-plugin-terser -D

注意

-D 標識安裝爲開發依賴，不能省略

開始打包

在項目根目錄下執行 bash ，並運行如下命令：

rollup -c

執行後，我們會在根目錄下的 lib 文件夾下看到如下三個文件：

發佈到 NPM

開始之前，我們需要在 package.json 中添加一些內容，用戶配置組件庫的位置和默認文件，代碼如下：

{
  "name": "jeremy-ui",
  "version": "0.0.3",
  "files": [
    "lib/*"
  ],
  "main": "lib/jeremy.js",
}

注意

發佈到 npm 時，發佈的項目名取決於配置中的 name 字段，發佈的版本號取決於該配置中的 version 字段

每次發佈時，發佈的新版本號不得低於該項目以前發佈過的任意版本號

然後，在項目根目錄下運行 bash 並執行如下命令：

npm login

然後登錄（輸入用戶名、密碼和郵箱），登錄成功後，再執行如下命令：

npm publish

注意

如果包名已經被別人發佈過，那麼這一步會失敗，修改的包名重新打包、發佈吧

如果發佈錯了，可以刪除這個包，但是要求是 72 小時內，這裏就不再展開了

發佈成功後，我們可以登錄 npm 查看一下：

使用 NPM 包

我們將項目切換到 website 分支，可以看到這個分支的組件都是通過 npm 進行安裝的，不再是通過本地安裝的了。當然，您也可以通過 bash 執行如下命令進行安裝：

npm install jeremy-ui

項目地址 🎁

GitHub: https://github.com/JeremyWu917/jeremy-ui

官網地址 🌍

JeremyUI: https://ui.jeremywu.top

感謝閱讀 ☕