如何发布一个包到npm

First

  在https://www.npmjs.com注册一个账号。

Second

  编辑好项目,文件大致如下:

其中,gitignore可以如下:

.DS_Store
node_modules/
dist/

注意:不能包含 npm-debug.log 。

Third:

npm login

Fourth:

npm publish

注意:如果使用了cnpm(默认使用),会报错:no_perms Private mode enable, only admin can publish this module

设置:npm config set registry http://registry.npmjs.org 即可。

这样就发布成功了。

如何使用自己发布的npm包

  即第一步: npm install toast-for-vue --save , 然后我们就可以发现根目录下的node_modules文件中多了这个包,而这个包就是我发布的包:

  第二步: 在src下的main.js中引入两个文件,如下所示:但是在使用过程中遇到了困难,就是在main.js(我使用的是vue-cli构建的项目)的引入方式如下:

import Toast from 'toast-for-vue'
import 'toast-for-vue/lib/toast.css'
Vue.use(Toast);

  但是,多次尝试后台都在报错,提示这个包没有安装,我也是百思不得其解。 最后终于发现了问题所在!

  因为我发现我只引入 css 文件的时候是可以引进来的,而引入 Toast 时却引不进来,于是我就尝试了下面两种方式,发现都可以成功引入:

import Toast from 'toast-for-vue/lib'
import Toast from 'toast-for-vue/lib/index.js'

  于是,我自然想到了入口文件,我的package.json文件内容如下:

{
"name": "toast-for-vue",
"version": "1.0.0",
"description": "toast used with vue project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/zzw918/toast-for-vue.git"
},
"keywords": [
"toast",
"vue",
"plugin"
],
"author": "John Zhu",
"license": "ISC",
"bugs": {
"url": "https://github.com/zzw918/toast-for-vue/issues"
},
"homepage": "https://github.com/zzw918/toast-for-vue#readme"
}

  可以发现,入口文件是index.js, 那么当我引入 toast-for-vue 时,肯定是不能得到 Toast 的, 因为在根目录下么有index.js ,注意,为什么我想要直接引入的时 Toast 呢? 因为在index.js中我导出了Toast插件,如下所示:

/**
* toast-for-vue v1.0.0
* https://github.com/zzw918/toast-for-vue
* Released under the MIT license
* Date: 2017-05-22
* Author: John Zhu , in xjtu
*/ var Toast = {};
Toast.install = function (Vue, options) {
// set default option
var defaultOpt = {
defaultType: 'center',
defaultDuration: ''
}; // replace the option if we set params in Vue.use()
for (var prop in options) {
defaultOpt[prop] = options[prop];
} // define the core function
Vue.prototype.$toast = function (message, type) { // we think center type the default type
if (typeof type == "undefined") {
var curType = defaultOpt.defaultType;
} else {
var curType = type;
} // if toast is used, we should delay the defaultDuration
if (document.querySelector('.toast')) {
function getTime() {
return new Date().getTime();
}
var startTime = getTime();
while (getTime() < startTime + defaultOpt.defaultDuration);
} // create the constructor
var template = Vue.extend({
template: '<div class="toast toast-' + curType + '">' + message + "</div>"
}); // create an instance and mount it on an element
var temEle = new template().$mount().$el; // insert the instance
document.body.appendChild(temEle); // after the duration time, remove it
setTimeout(function () {
document.body.removeChild(temEle);
}, defaultOpt.defaultDuration);
}; // set different kinds for call
['bottom', 'center', 'top'].forEach(function (type) {
Vue.prototype.$toast[type] = function (message) {
return Vue.prototype.$toast(message, type);
}
});
} module.exports = Toast;

  这样就不难理解了!  所以当务之急是设置好入口文件。 即"main": "lib/index.js",  欲了解更多,请看下文。。。

如何更新发布到npm的package?

  在上面的过程中,由于没有入口文件,所以这是一个bug,我希望添加一个入口文件,所以想要更新 npm 包,并重新引入。 现介绍方法。

  我们在package.json中添加入口文件,如下所示:

{
"name": "toast-for-vue",
"version": "1.0.0",
"description": "toast used with vue project",
"main": "lib/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/zzw918/toast-for-vue.git"
},
"keywords": [
"toast",
"vue",
"plugin"
],
"author": "John Zhu",
"license": "ISC",
"bugs": {
"url": "https://github.com/zzw918/toast-for-vue/issues"
},
"homepage": "https://github.com/zzw918/toast-for-vue#readme"
}

  即这时我修改了入口文件。

  

接着,git add --all、 git commit 、git push 。。。

接下来,因为我们的包已经变了,所以我们就要更换版本, 如下:

即在patch之后,版本自动就成为了 1.0.1。

最后, npm publish 即可。 (注意:不要用git bash,使用管理员方式打开cmd即可。)

ok! 这样,我们进入npm官网,就会发现版本已经变化了:







  

  好了,在上面的过程中,我们已经把包进行了升级,所以我们的项目中使用的版本也需要迭代, 所以,这时候,我们就需要进行更新包了,更新包非常简单,使用:

npm update toast-for-vue

  这样就可以成功更新了!

  补充: 其实这里更好的做法是 npm install toast-for-vue --save

  

import Toast from 'toast-for-vue'
import 'toast-for-vue/lib/toast.css'
Vue.use(Toast);

  这样,就可以成功使用了!!!

恩,就是为了这个小效果!!!

  

最新文章

  1. mysql强更改root密码
  2. java编写冒泡排序
  3. VTK初学一,c_Line_CellArray线段的CellArray绘制
  4. [JS3] 立即执行JS
  5. Asp.net Core 1.0.1升级到Asp.net Core 1.1.0 Preview版本发布到Windows Server2008 R2 IIS中的各种坑
  6. linux 多线程信号处理总结
  7. flex的Cairngorm框架
  8. DevSecOps 简介(一)
  9. easyui源码翻译1.32--ValidateBox(验证框)
  10. linux在shell中获取时间
  11. JavaScript-学习一字符串
  12. Oracle 存储过程,临时表,动态SQL测试
  13. 【SICP读书笔记(五)】练习2.32 --- 递归求集合子集
  14. mysql的内连接,外连接(左外连接,右外连接)巩固
  15. gitlab搭建和使用
  16. [转]Windows Server 2016 服务器IIS配置
  17. [Java] SpringMVC工作原理之一:DispatcherServlet
  18. [luogu#2019/03/10模拟赛][LnOI2019]长脖子鹿省选模拟赛赛后总结
  19. 地图上道路编号中的G S X Y
  20. ES 记录之如何创建一个索引映射,以及一些设置

热门文章

  1. 【Head First Java 读书笔记】(二)类与对象
  2. 15分XX秒后订单自动关闭(倒计时)
  3. Hackfive 使用TextSwitcher和ImageSwitcher实现平滑过渡
  4. wp socket tcp链接
  5. C#构造函数用法
  6. UIButton的几种触发方式
  7. Guideline 2.1 - Information Needed需要补充录制视频
  8. git配置本地环境(phpstudy/tortoisegit/git等)
  9. php代码审计6审计xss漏洞
  10. Web渗透测试(xss漏洞)