在Vue中，如何用lib模式釋出自己的庫代碼

使用lib模式打包

在vue-cli官網中有指出如何使用lib模式建構代碼。

當你運作 

vue-cli-service build

 時，你可以通過 

--target

 選項指定不同的建構目标。它允許你将相同的源代碼根據不同的用例生成不同的建構。

lib模式預設是不含有Vue的，若原代碼中有vue，則會将原代碼中的vue删除。

注意對 Vue 的依賴

在庫模式中，Vue 是外置的。這意味着包中不會有 Vue，即便你在代碼中導入了 Vue。如果這個庫會通過一個打包器使用，它将嘗試通過打包器以依賴的方式加載 Vue；否則就會回退到一個全局的 

Vue

 變量。

要避免此行為，可以在

build

指令中添加

--inline-vue

标志。

vue-cli-service build --target lib --inline-vue
           

核心指令——将一個單獨的入口建構為一個庫：

vue-cli-service build --target lib --name myLib [entry]
           

 這個入口可以是一個 

.js

 或一個 

.vue

 檔案。如果沒有指定入口，則會使用 

src/App.vue

。我們隻需要在指定的入口檔案中export我們需要的子產品即可。

例如：

export {default as Button} from './button/button'
export {default as Cascader} from './cascader/cascader'
export {default as CascaderItems} from './cascader/cascader-items'
export {default as GridRow} from './grid/row'
export {default as GridCol} from './grid/col'
export {default as Input} from './input/input'
           

建構一個庫會輸出：

• dist/myLib.common.js

  ：一個給打包器用的 CommonJS 包 (不幸的是，webpack 目前還并沒有支援 ES modules 輸出格式的包)

• dist/myLib.umd.js

  ：一個直接給浏覽器或 AMD loader 使用的 UMD 包

• dist/myLib.umd.min.js

  ：壓縮後的 UMD 建構版本

• dist/myLib.css

  ：提取出來的 CSS 檔案 (可以通過在 

  vue.config.js

   中設定 

  css: { extract: false }

   強制内聯)

将打包指令寫入package.json中：

"description": "一個基于vue的ui元件庫",
  "main": "dist/Tione.umd.min.js",  //打包後的包入口檔案
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name Tione src/index.js",
  },
           

打包出來的檔案：

JS中的子產品是什麼

1、立即執行函數

在js早期的時候，是沒有子產品的概念的，僅僅是一個個簡單的腳本。js程式員們通過立即執行函數封裝成一個個獨立的局部作用域，這就是子產品早期的雛形。

2、CommonJS

直到node.js的誕生，js可以寫背景了，背景代碼量大功能多，不得不需要封裝成子產品以便調用。而這個JS子產品化标準稱之為——CommonJS。

CommonJS是同步的，同步的在node.js環境伺服器中使用同步加載子產品是沒有問題的，但在浏覽器中js是在html中異步加載資源的，CommonJS在浏覽器中就不太使用了。

代碼風格：

module;
module.exports=new hello();
           

3、AMD

requirejs子產品化标準，我們稱之為AMD。它是異步代碼，适用于在浏覽器中進行加載。

代碼風格：

require(['vue'],function (Vue) {  //參數vue就是vue.js對外暴露的對象
    // 内容
    new Vue()
});
           

4、import/export

ES6的新文法import/export，ES6 子產品的運作機制與 CommonJS 不一樣。JS 引擎對腳本靜态分析的時候，遇到子產品加載指令

import

，就會生成一個隻讀引用。等到腳本真正執行時，再根據這個隻讀引用，到被加載的那個子產品裡面去取值。換句話說，ES6 的

import

有點像 Unix 系統的“符号連接配接”，原始值變了，

import

加載的值也會跟着變。是以，ES6 子產品是動态引用，并且不會緩存值，子產品裡面的變量綁定其所在的子產品。

ES6在語言規格的層面上，實作了子產品功能，而且實作得相當簡單，完全可以取代現有的CommonJS和AMD規範，成為浏覽器和伺服器通用的子產品解決方案。

5、UMD

umd是AMD和CommonJS的結合，即可異步也可同步。

開發人員又想出另一個更通用的模式UMD （Universal Module Definition）。希望解決跨平台的解決方案。UMD先判斷是否支援Node.js的子產品（exports）是否存在，存在則使用Node.js子產品模式。再判斷是否支援AMD（define是否存在），存在則使用AMD方式加載子產品。

webpack的環境判斷

我們可以點開打包後的dist檔案中以umd.js結尾的檔案，看看webpack是如何進行環境判斷的。

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object') //node.js
		module.exports = factory(require("vue"));
	else if(typeof define === 'function' && define.amd) //AMD webpack 浏覽器環境
		define([], factory);
	else if(typeof exports === 'object') //???
		exports["Tione"] = factory(require("vue"));
	else //root => window global 等等其它環境
		root["Tione"] = factory(root["Vue"]);  
})