如何用 Vue-CLI 3 打包 npm 包

pimkle發表於2019-04-01
VueNPM

須知

本文部分內容參考以下連結：
blog.fundebug.com/2018/06/08/…

步驟

1、安裝 Vue-CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli
複製程式碼

參考：cli.vuejs.org/zh/guide/in…

2、用 Vue-CLI 建立專案

定位到上級目錄，建立 Vue-CLI 專案。新建或者覆蓋都可以

vue create vue-cli
複製程式碼

3、調整專案配置

Vue-CLI 在建立好專案後會自動進行安裝，安裝完畢的專案目錄如下圖

如何用 Vue-CLI 3 打包 npm 包

① 設定打包範圍

設定輸出目錄為 components 資料夾

設定打包 npm 包，輸出的主題內容在 src/components 目錄下

編寫需要輸出的主檔案

在 components 資料夾下建立 component.vue 檔案，在 components 資料夾下建立 parts 資料夾，parts 資料夾下建立子控制元件 part1.vue、part2.vue, 被 component.vue 引用。更新好內容的目錄如下圖：

如何用 Vue-CLI 3 打包 npm 包

components 資料夾下的任何檔案，都可以引用 components 外的任何檔案，對打包不會造成影響。

建立輸出目錄檔案

先在 src/components 目錄下建立 index.js 檔案

import component from './component.vue';

component.install = Vue => Vue.component(component.name, component);

export default component;
複製程式碼

以上是輸出單元件的寫法，輸出多元件的寫法參考下列程式碼

如何用 Vue-CLI 3 打包 npm 包

② 配置 package.json 檔案

?name

name 表示打包出來的專案的名字，將來這個庫被別的專案引用，名字決定了它在 node_modules 下資料夾的名字。

如果你希望打包出一個 npm 包庫群下的一個元件，假設這個 npm 包庫群的名字叫 @demo, 這個包本身的名字叫 tester, name 欄這麼寫:

@demo/tester
複製程式碼

其他專案引用後，node_modules 裡就會長這樣：

如何用 Vue-CLI 3 打包 npm 包

當然字首什麼都沒有的話:

"name": "tester"
複製程式碼

其他專案引用後， node_modules 裡就是光一個 tester 資料夾。

?version

版本號，從 0.1.0 開始, 每次 publish 前升級下版本號。

description

專案描述

keyword

一個字串陣列，方便別人搜尋到本模組

licence

證書 說明對應的開源協議
如何選擇證書，引用自 阮一峰 的文章

如何用 Vue-CLI 3 打包 npm 包

repository

程式碼管理的地址

? main

專案入口檔案地址

"main": "./dist/component.common.js"
複製程式碼

component 這個名字和後面配置的 scripts 裡面的命名有關

? files

普通專案引用這個庫，實際需要的檔案，是在我們打包輸出的 dist 資料夾裡的，但是這種輸出檔案放到 git 管理裡又不智慧，可以在 package.json 裡新增這個 files,

"files": [
    "dist"
],
複製程式碼

可以達到既不在 git 程式碼管理裡儲存 dist 資料夾，普通專案又能引入所需檔案的目的。

? scripts

在 scripts 中新增打包指令：

"build-bundle": "vue-cli-service build --target lib --name component ./src/components/index.js"
複製程式碼

這樣每次打包只需要執行

yarn build-bundle
複製程式碼

即可 (記得升級版本號)

private

"private": false,
複製程式碼

如果是公司內部的 npm 包，就不需要改了

依賴

專案中會有 dependencies、devDependencies、peerDependencies
具體區分參考 這篇文章
有助於減小包的大小

③ 配置 vue.config.js 檔案

新增 css 內聯配置

module.exports = {
    ...
    css: { extract: false }
    ...
}
複製程式碼

這樣打包出來的檔案會直接被內聯到指令碼檔案裡，不需要落地專案再引用一遍 css，來讓樣式配置生效

4、打包

在專案目錄裡執行

yarn build-bundle
複製程式碼

進行打包

如果你要打包到外面的 npm 庫 釋出：npm publish --access public

實際釋出的時候，我用的 name 是 @pimkle/tester

npm 未登入註冊等報錯資訊，在鍵入 npm publish 後，terminal 都會告訴你的，按照 terminal 的提示一步步進行操作即可。

DEMO

上文提到了各個注意點，具體參考 demo 如下：
github.com/pimkle/npm-…

該 demo 專案未在實際專案引用測試過，有任何問題請留言或者發郵件和我聯絡 yeonkitt@gmail.com

相關文章