背景：組件化開發(fā)需要，走了一遍發(fā)布npm包的過程，采用很簡單的模式實(shí)現(xiàn)包的發(fā)布流程，記錄如下。
項(xiàng)目參考：基于vue的時(shí)間播放器組件，并發(fā)布到npm_timeplay.js_xmy_wh的博客-CSDN博客
1、項(xiàng)目初始化
首先，要創(chuàng)建項(xiàng)目，封裝vue的插件要寫的是一個(gè)簡單的vue組件不需要依賴那么多而龐大的配置，所以，這里用簡單版本的webapck配置模板：
vue init webpack-simple my-project然后在在src下創(chuàng)建一個(gè)lib文件夾包含index.js和vue-time-play.vue目錄結(jié)構(gòu)如下
在index.js中將組件作為vue插件導(dǎo)出
import vueTimePlay from './vue-time-play' // 導(dǎo)入組件
const timePlay = {
install (Vue, options) {
Vue.component(vueTimePlay.name, vueTimePlay) // vueTimePlay.name 組件的name屬性
}
}
export default timePlay // 導(dǎo)出..?在main.js中引入
import vueTimePlay from './lib/index.js'
Vue.use(vueTimePlay)2、開發(fā)組件
在vue-time-play.vue中編寫組件 此組件是基本vue的時(shí)間播放器，主要功能是可以按天或者時(shí)間播放來切換，并且可以配置速度來切換播放速度。 此處省略 vue-time-play.vue中的代碼，請移步到結(jié)尾的源碼鏈接查看。
3、修改配置項(xiàng)
修改 webpack.config.js
// 執(zhí)行環(huán)境
const NODE_ENV = process.env.NODE_ENV;
module.exports = {
// 根據(jù)不同的執(zhí)行環(huán)境配置不同的入口
entry: NODE_ENV == 'development' ? './src/main.js' : './src/lib/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'vue-time-play.js',
library: 'vue-time-play', // 指定的就是你使用require時(shí)的模塊名
libraryTarget: 'umd', // 指定輸出格式
umdNamedDefine: true // 會對 UMD 的構(gòu)建過程中的 AMD 模塊進(jìn)行命名。否則就使用匿名的 define
}然后npm run build
修改 package.json 文件：
// 發(fā)布開源因此需要將這個(gè)字段改為 false
"private": false,
// 這個(gè)指 當(dāng)import vueTimePlay from vue-time-play 的時(shí)候引入的包
"main": "dist/vue-time-play.js",查看.npmignore文件，不要忘記把dist文件提交上去
4、發(fā)布
4.1? 注冊npm賬號：地址=>npm，按照提示一路走下去即可注冊成功。
4.2 注冊成功之后，需要在命令行登陸：
npm login4.3 需要輸入賬號，密碼以及郵箱驗(yàn)證碼等，按照提示操作即可。
4.4 發(fā)布npm包?
npm publish發(fā)不成功后郵箱會收到通知，并且也可以去npm上查看已經(jīng)發(fā)布成功的包，至此,已經(jīng)完成一個(gè)組件的發(fā)布啦。
注意：每次npm publish時(shí)需要更改版本號，package.json里的version字段。
5、使用自己的組件
-
執(zhí)行命令?
npm install vue-time-play --save
6、使用過程中注意查看鏡像等，可以使用nrm，常用命令：
1.npm install -g nrm //全局安裝
2.nrm use npm //切換到npm，選中會有選中的狀態(tài)提示
3.nrm use taobao //切回淘寶鏡像以上是使用vue簡單發(fā)布一個(gè)組件到npm的過程，目前存在一些靜態(tài)資源找不到的問題，后續(xù)解決了更新。
結(jié)束
感謝您的閱讀。
項(xiàng)目源碼 & 文檔文章來源：http://www.zghlxwxcb.cn/news/detail-671367.html
歡迎大家安裝使用，有任何問題大家可以留言相互交流。文章來源地址http://www.zghlxwxcb.cn/news/detail-671367.html
到了這里，關(guān)于基于 vue2 發(fā)布 npm包的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
