如何用 Vue-CLI 3 打包 npm 包

須知

本文部份內容參考如下連接：
blog.fundebug.com/2018/06/08/…

步驟

一、安裝 Vue-CLI

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

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

二、用 Vue-CLI 建立項目

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

vue create vue-cli
複製代碼

三、調整項目配置

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

① 設定打包範圍

設定輸出目錄爲 components 文件夾

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

編寫須要輸出的主文件

在 components 文件夾下建立 component.vue 文件，在 components 文件夾下建立 parts 文件夾，parts 文件夾下建立子控件 part1.vue、part2.vue, 被 component.vue 引用。更新好內容的目錄以下圖：

components 文件夾下的任何文件，均可以引用 components 外的任何文件，對打包不會形成影響。

建立輸出目錄文件

先在 src/components 目錄下建立 index.js 文件

import component from './component.vue';

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

export default component;
複製代碼

以上是輸出單組件的寫法，輸出多組件的寫法參考下列代碼

② 配置 package.json 文件

🐽name

name 表示打包出來的項目的名字，未來這個庫被別的項目引用，名字決定了它在 node_modules 下文件夾的名字。

若是你但願打包出一個 npm 包庫羣下的一個組件，假設這個 npm 包庫羣的名字叫 @demo, 這個包自己的名字叫 tester, name 欄這麼寫:

@demo/tester
複製代碼

其餘項目引用後，node_modules 裏就會長這樣：

固然前綴什麼都沒有的話:

"name": "tester"
複製代碼

其餘項目引用後， node_modules 裏就是光一個 tester 文件夾。

🐽version

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

description

項目描述

keyword

一個字符串數組，方便別人搜索到本模塊

licence

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

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，來讓樣式配置生效

四、打包

在項目目錄裏執行

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