npm封装上传简述

2020-10-18  本文已影响0人  小灰灰_a

作为前端开发工程师,npm包一定不陌生,现在大家用的大部分是第三方的包,那自己怎么封装一个包呢,下面让我们一起看下;

1、首先创建一个文件夹;

2、进入文件夹,初始化一个项目;

3、既然封装公共组建,就需要发布到npm包,供大家使用,做一些组件修改;

4、注册npm账号,发布npm包;

现在基本流程已经了解,具体做法我们讲一下;

第一步,我们需要进入本地npm包存放地址,cd Documents;

第二步,我们在当前文件夹初始化一个vue项目,简单版本,我们不需要很多的依赖,vue init webpack-simple npm_test;

第三步,使用npm install && npm run dev启动项目,在这个基础上做一些简单地开发,到现在大家是不是看着没什么问题,跟之前vue项目没什么区别,好,接下来我们看第四步;

第四步,我们修改src中index.js文件,目的是什么呢?当然是将该组件作为 Vue 插件可以被使用,具体做法如下:

import Adds from './add.vue'

const comment = {

  // 注册组件

  install: function(Vue) {

    Vue.component('Adds', Adds)

  }

}

// 这里的判断很重要

if (typeof window !== 'undefined' && window.Vue) {

    window.Vue.use(comment)

}

export default comment

第五步,执行npm run build,把index.html中src引用换成<script src="./dist/vue-adds.js"></script>,

第六步,修改package.json中的配置,因为要开源,需要 "private": false,并且把入口改为"main": "dist/vue-adds.js",将.gitignore 去掉忽略dist, 把打包的文件也提交上去;

第七步,npm login 登录, 然后npm pulish发布就可以了。

需要注意的是:每次更新时候,version不能一样(重要,重要,重要)。

现在自己封装的npm包就已经发布完成,其他人就可以通过npm下载自己的包了,是不是很简单,bingo~~

源码github:https://github.com/1196778674/npm_test

上一篇 下一篇

猜你喜欢

热点阅读