从零开始开发一个vue组件打包并发布到npm

自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合vue.js 就不需要webpack这种构建工具了,可以直接在页面内使用,下面以 ‘yyl-npm-practice’ 这个包为例

第一步:使用 vue init webpack-simple yyl-npm-practice 初始化项目
  • 提示: 不要用 vue init webpack npm-practice 初始化项目,因为我们就开发个组件,不需要那么多配置,配置多了修改起来也麻烦,webpack-simple足够了。

  • 初始完项目,按照提示输入项目信息即可,然后 npm install , npm run dev 让项目跑起来,如下图:

第二步:修改文件目录

1.在src目录下新建components文件夹,然后在此文件夹下建立Main.vue文件

Main.vue 名字也可以是其他,我们写的这个组件就是放在该文件里面,之前的App.vue是用于本地开发,测试用的入口文件,也就是用于 npm run dev 的入口文件。

2.在webpack.config.js同级目录(也是该组件的根目录)下新建 index.js文件, index.js是把Main.vue文件暴露出去的出口。

第三步:修改文件内容,配置

1.Main.vue内容如下(注意name):

 <template>
   <div class="container">
    <div>{{msg}}</div>
    <div>{{propData}}</div>
  </div>
 </template>

<script>
 export default {
   name: 'yyl-npm-practice',
   data () {
    return {
       msg: 'Welcome to Your Vue.js App'
     }
  },
  props: {
      propData: {
          type: String,
          default: '我是默认值'
      }
    }
 }
</script>

<style lang="scss">
.container{
    text-align: center;
}
</style>

2.App.vue内容如下:

<template>
 <div>
   <Main :propData='initData'/>
 </div>
</template>
<script>
import Main from './components/Main'
export default {
data(){
  return {
    initData: 'hello 你好'
   }
 },
  components:{
  Main
    }
}
</script>
 <style>
 </style>

3.index.js内容如下:

import Main from './src/components/Main'

// 这一步判断window.Vue是否存在,因为直接引用vue.min.js, 它会把Vue 
 // 绑到Window上,我们直接引用打包好的js才能正常跑起来。
 if (typeof window !== 'undefined' && window.Vue) {
   window.Vue.component('yyl-npm-practice', Main)
 }
//这样就可以使用Vue.use进行全局安装了。
  Main.install = function(Vue){
    Vue.component(Main.name, Main)
  }
   export default Main

index.js内容改完如下, 因为使用 window.Vue.component('yyl-npm-practice', Main) 的时候 外部引用的时候 有可能会覆盖该组件,导致组件无法正常使用;
使用下面的的定义方式后, 在.vue 环境下 使用方式不变, 在只引用 ys-expression.js 环境下 需在 new Vue() 之前加 window['ys-expression'].default.install();

 import Main from './src/component/Main'
 import _Vue from 'vue'
 Main.install = Vue => {
 if (!Vue) {
    window.Vue = Vue = _Vue
 }
  Vue.component(Main.name, Main)
}
  export default Main;

4.修改package.json

package.json需要修改private字段(private是true的时候不能发布到npm,需设置成false); 并增加main字段, main字段是require方法可以通过这个配置找到入口文件,这输入模块加载规范,具体可以参考 这里, 主要内内容截图如下:

修改完package.json如下,标红的就是新增和改变的属性。

5.修改 webpack.config.js

其实就是修改entry 和output,截图如下:

说明:入口会根据开发环境 ,生产环境切换, main.js 是npm run dev 的入口,就是App.vue, 用于调试/测试我们开发的组件; index.js是Main.vue, 就是我们开发的组件,我们打包到生产环境打包就只是单纯的 yyl-npm-practice 组件

6.修改index.html的js引用路径,因为我们修改了output 的 filename,所以引用文件的名字也得变。

到此组件就开发完了,打包下看看, npm run build dist下生成了俩文件,如下:

这个.map文件怎么回事,其实就是这段代码:

生产环境的时候, 我们就不调试了,也不想要这个.map文件,那就先把这个 devtool删了,然后放在这里,看下图,只要在开发环境的时候才启用这个调试,

把dist目录下的俩文件删除,再npm run build 就不会产生.map文件了。

npm run dev 让项目跑起来,我们在App.vue里面调用该组件,并做测试,调试。

第四步: 发布到npm

1. 去 npm 官网注册个账号 https://www.npmjs.com/

2.在该组件根目录下的终端(就是 平常输入 npm run dev的地方),运行npm login,会提示输入个人信息,Email是发布成功后,自动给这个邮箱发送一个邮件,通知发布成功,输入完,登录成功


3.最后就可以发布了, npm publish, 如下,发布成功(每次发布的时候packa.json 里面的 version不能一样,不然不能发布出去,手动改下版本就行)

去自己的npm上点击Packages ,就能看到发布的包

包的具体信息如下:

大家最好在readme 里面写上组件的使用方法, 说明等等,方便你我他。

使用方法 :

1.组件内部使用

html: 
  <Main/>
js:
import Main from 'yyl-npm-practice'
components: {
     Main
  }
  1. main.js 全局安装:

     import Main from 'yyl-npm-practice'
     Vue.use(Main)
     然后在其他.vue文件里面,直接使用组件 <yyl-npm-practice/> 即可
    

3.直接引用打包后的 yyl-npm-practice.js

这种方式就不需要webpack这类的构建工具,跟jquery的方式差不多,可以直接页面引用,使用方法示例如下:

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容