附件下載：發(fā)布和使用自己的NPM包.zip
NPM(node package manager) 是NodeJs官方提供的包管理工具串绩，讓開發(fā)者可以方便地下載图贸、安裝驰弄、升級(jí)遮糖、刪除依賴包绣的。因?yàn)镹PM默認(rèn)的鏡像源(https://registry.npmjs.org) 在國(guó)外，下載會(huì)比較慢，一般會(huì)使用淘寶鏡像被辑，有兩種使用方式：直接修改npm鏡像源燎悍、下載cnpm。推薦下載使用cnpm盼理，保留npm默認(rèn)源谈山。通過命令npm install -g cnpm --registry=https://registry.npm.taobao.org安裝cnpm。大部分前端開發(fā)者應(yīng)該都用過npm install命令下載依賴包宏怔，而發(fā)布命令npm publish用的比較少奏路，接下來將通過一個(gè)實(shí)例來詳細(xì)介紹如何發(fā)布npm包。
創(chuàng)建一個(gè)npm項(xiàng)目
- 創(chuàng)建一個(gè)新的文件夾并進(jìn)入臊诊，本例文件夾名【yo-coder】鸽粉，執(zhí)行
npm init命令初始化項(xiàng)目，執(zhí)行命令后有一些信息要填抓艳，直接忽略触机，一路回車即可(后面可以修改)，最后會(huì)在文件夾下生成一個(gè)package.json文件
{
"name": "yo-coder", // 項(xiàng)目名稱玷或，在npm倉庫中唯一
"version": "1.0.0", // 版本號(hào)
"description": "", // 描述
"main": "index.js", // 使用import yo from \'yo-coder\'導(dǎo)入時(shí)儡首，yo指向的文件
"scripts": { // 自定義命令\r\n \"test\": \"echo 這是一個(gè)測(cè)試命令\"
},
"author": "朽木", // 作者
"license": "MIT" // 一種開源協(xié)議，作者只保留版權(quán)偏友，其他的可以為所欲為
}
- 寫一點(diǎn)代碼
為了演示方便蔬胯，這里就簡(jiǎn)單的創(chuàng)建了一個(gè)index.js文件，導(dǎo)出兩個(gè)方法
exports.yo = function() {
alert('Yo Coder!')
}
exports.hello = function() {
alert('Hello Coder!')
}
發(fā)布到npm
到 https://www.npmjs.com/signup 注冊(cè)npm賬號(hào)位他，如果有賬號(hào)了請(qǐng)忽略
執(zhí)行命令
npm adduser氛濒，根據(jù)提示完成登錄，登錄后會(huì)在~/.npmrc文件里保存身份令牌鹅髓，可以把這個(gè)文件拷貝到項(xiàng)目里舞竿，其他人直接指定這個(gè)配置文件進(jìn)行發(fā)布，不用登錄執(zhí)行命令
npm publish發(fā)布-
在npm網(wǎng)站上查看發(fā)布的包信息 https://www.npmjs.com/package/yo-coder
查看npm倉庫 -
在淘寶NPM鏡像網(wǎng)站上查看發(fā)布的包信息 https://npm.taobao.org/package/yo-coder
cnpm不會(huì)實(shí)時(shí)更新迈勋，目前的同步頻率為10分鐘同步一次炬灭，可以手動(dòng)點(diǎn)擊SYNC觸發(fā)同步
查看淘寶npm倉庫
下載使用npm模塊，以vue為例
如果你已經(jīng)很熟悉vue或react這些項(xiàng)目靡菇，忽略以下內(nèi)容吧
- 執(zhí)行
npm install -g vue-cli命令安裝vue腳手架，使用vue -V命令驗(yàn)證是否安裝成功 - 執(zhí)行
vue init webpack yo-coder-test初始化vue項(xiàng)目米愿，這里項(xiàng)目名為【yo-coder-test】厦凤，一路回車后，會(huì)自動(dòng)開始下載依賴包育苟，因?yàn)槟J(rèn)是從npm源下載依賴包较鼓，會(huì)比較慢，按ctrl c取消下載，進(jìn)入目錄博烂，手動(dòng)使用cnpm install命令下載依賴包 - 執(zhí)行
npm run dev命令啟動(dòng)vue項(xiàng)目香椎，瀏覽器打開localhost:8080查看vue的歡迎界面 - 執(zhí)行
npm install --save yo-coder命令，執(zhí)行成功后會(huì)在package.json里記錄依賴的包禽篱，方便下次直接執(zhí)行npm install命令下載依賴包畜伐。install命令中的--save是運(yùn)行時(shí)依賴，記錄在在dependencies下躺率，比如antd玛界、element-ui等；--save-dev是開發(fā)時(shí)依賴悼吱，記錄在devDependencies下慎框，比如webpack、eslint等 -
使用yo-coder模塊后添，直接在App.vue里測(cè)試笨枯，效果就是一個(gè)簡(jiǎn)單的alert
測(cè)試代碼
