文/ziven
標題圖/來自網(wǎng)絡(luò)
有時候，開發(fā)過程中，有意無意都會慢慢有自己的一些積累，比如說寫了一個動畫組件，或者寫了一個比較漂亮，體驗比較好的插件。這時候我們都希望無差別的在以后的工作中能夠即時的使用這些我們曾經(jīng)做過的東西。把開發(fā)過的組件發(fā)布到npm 是個不錯的方式。
本坑在開發(fā)vue項目中也有類似的經(jīng)歷，但是對webpack打包模塊化不是很清楚，如果覺得頭痛webpack的配置，在開發(fā)過程中不妨先把webpack放一邊，先看看npm publish，直接調(diào)用vue文件,以此一步步增強了解整個發(fā)布開發(fā)組件過程。
這種方式簡單粗暴，首先指定一個目錄，執(zhí)行<pre>npm init</pre>這時候就會出現(xiàn)如下圖情況反饋
如果覺得每個選項不知道回答什么，就一直回車就好，最后在文件夾中會多出一個package.json.這里直接給出整個package.json
<pre>{
"name": "vuetest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}</pre>
它已經(jīng)有了主入口文件main.js，如果沒有，手動添加，這里把自己要用的vue插件替換掉index.js，比如我的是transform.vue 一個3d顯示的圖片的插件，就換成 “main”:"transform.vue" ,組件放在與package.json 同級目錄下。
執(zhí)行發(fā)布前必須要登錄,要有自己的賬號，這里不再說了，找到npm官網(wǎng)進行注冊 ，npm發(fā)布不能使用淘寶鏡像，發(fā)布可能無法成功，這時候設(shè)置為npm默認配置就行，如下
<pre>npm config set registry http://registry.npmjs.org </pre>
以上是最簡單的npm發(fā)布組件，并且直接使用vue文件，很顯然是沒有擴展性的。這時候沒有webpack不行，它可以對vue進行整理編譯，模塊化成js文件，webpack的配置可以兼容多種應(yīng)用方式。對于不太清楚webpack到底是啥，配置項有哪些的，其實不要忙著馬上去上手配置插件，往往會造成很多彎路。先要搞清楚來龍去脈才是重要的。
webpack與gulp區(qū)分與理解
很多初學(xué)者有些疑惑這兩者的區(qū)別，包括我在內(nèi)，往往都用魚和熊掌來比喻兩者，所以很多人都慣性認為他們的目標是一樣的。其實兩者是可以同時使用在一個項目之中的。它們有不一樣的重點，也有不一樣的工作方式，具體目標也并不相同，拿來進行比較是不太正確的。
webpack最大的特點就是模塊化打包，這是最大的特點，當我們開發(fā)的組件越來越多時，它可以滿足我們進行有條件，有選擇的加載某些模塊。當然它也可以壓縮我們要打包的文件了。
gulp就是自動化構(gòu)建工具，所謂自動化，就是什么都不用管，它自動去完成，像比如說自動壓縮圖片，合并圖片，合并樣式，編譯less,等等，本坑還沒有認真學(xué)習(xí)它，也只是大概的了解，據(jù)我所知，他在壓縮文件上有很多花樣，以后將會出個專題討論它。
所以總的來說，Gulp是一個工具，而webpack是模塊化技能與方法于一身的'物件'。Gulp可以使用webpack插件等諸多插件來進行自動化效果，從而達到多者插件并用的效果
module.export之前發(fā)生了什么
打開我的vue庫地址，我們來看看三個要注意的文件，其中前兩個更加重要一些。webpack配置文件。webpack配置的入口文件，運行這些配置將導(dǎo)出最后的打包文件
入口文件中看到module.export導(dǎo)出了我們寫得模塊。
那么為啥export后就能在別處使用呢？我不禁要問。于是我就去找導(dǎo)出來的是什么？下面就是我找到的答案。
其實如果不用webpack打包，不結(jié)合加載器，export出來的還是vue(可以實際操作以下)，很顯然這是不能用在沒有vue構(gòu)建環(huán)境之下的。因為沒有vue-loader,vue得不到解析。vue是html，css，js 的結(jié)合體，通過webpack打包，webpack有諸多l(xiāng)oader，其中vue-loader就是能夠解釋vue并且導(dǎo)出三個不同的部分，然后給其他的loader繼續(xù)處理。而到了module.export出來的是按照一種格式形成的模塊。這個模塊可以require，可以import，可以在html中js,css 直接引用等等達到加載這些模塊。這樣說起來心里是不是有些數(shù)了呢？還是更迷糊了呢？
一步兩步的構(gòu)建自己的插件庫
不懂的我，從vue-cli本身的webpack配置開始
第一步，vue-cli 腳手架搭建vue項目
第二步，復(fù)制黏貼自己要發(fā)布的vue組件，放到components里，我的是transform.vue，一個3d隨鼠標顯示圖片的插件。packjson設(shè)置main屬性為dist/xxxxxx.js，src文件寫好webpack的入口文件js，內(nèi)容可以看本坑github的例子。把webpack.base.conf.js內(nèi)容復(fù)制到自己的webpack文件中，進行簡單修改，比如說里面一些路徑改下，其他可以不改。
第三步，執(zhí)行webpack ，打包完成了。
新建個demo文件夾,可以看到是否可以使用，正常使用
這些都是大致的打包，打包配置將在今后進行不斷改進。
(課外關(guān)鍵題)--打包格式中的‘小學(xué)問’
上面說到經(jīng)過webpack后export導(dǎo)出了一定格式的模塊或者多個模塊文件。這個格式就是CommonJS。那么要問了，打包格式有哪些呢？說起來，大概以下幾種，commonjs,cmd，amd，umd。下面是對他們的基本解釋。
CommonJS：js 模塊化的目的是為了邏輯清楚，復(fù)用方便，commonjs就是在這樣的需求下誕生的模塊化規(guī)范。我們在nodejs開發(fā)的實際代碼中看到require，export，module就是其語法定義。這樣說來nodejs，npm就是采用了commonjs，但是nodejs也加了其他東西，并非都是commonjs一家構(gòu)成。
AMD：然而commonjs不是萬能的，因為它的致命缺點之一就是沒辦法在瀏覽器中引用，為什么呢？舉個例子，它的require如果運用到瀏覽器，網(wǎng)絡(luò)的高延時很可能讓require加載失敗，不像服務(wù)器可以沖本地require。那怎么辦呢？異步加載唄！這就是AMD出現(xiàn)原因，它的全名翻譯是異步模塊定義（define(['dep1','dep2'],function(dep1,dep2){...});），熟悉require.js對AMD就再了解不過了。
CMD:CMD是AMD的變種，有些不同,都在傳送門里，
UMD:同時以 AMD、CommonJS2 和全局屬性形式輸出。
webpack中output.libraryTarget,它的支持有以下幾種
“var” - 以一個變量形式輸出： var Library = xxx (default)；
“this” - 以 this 的一個屬性輸出： this[“Library”] = xxx；
“commonjs” - 以 exports 的一個屬性輸出：exports[“Library”] = xxx；
“commonjs2” - 以 module.exports 形式輸出：module.exports = xxx；
“amd” - 以 AMD 格式輸出；
“umd” - 同時以 AMD、CommonJS2 和全局屬性形式輸出。
