12 - Vue3 UI Framework - 打包釋出

Jeremy.Wu發表於2021-12-22
VueUIFramework

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

接下來，我們對之前做的元件進行打包釋出到 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 暫時可以忽略，不過後面儘量完成認證。

image-20211222093456720

配置打包

首先，要清楚我們的專案是基於 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 資料夾下看到如下三個檔案：

image-20211222100048263

釋出到 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 檢視一下：

image-20211222101356400

使用 NPM 包

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

npm install jeremy-ui

專案地址 ?

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

官網地址 ?

JeremyUI: https://ui.jeremywu.top

感謝閱讀 ☕

相關文章