最近有同事在搞npm插件,想用了这么久的npm也没有自己制作一个插件出来练一练,所以动手把之前的图片随手势移动的react组件改写成了npm插件,之前的博客地址http://www.cnblogs.com/wunan/p/5801835.html

  首先需要在npm官网注册自己的账号,这个在发布的时候需要关联。

  (默认电脑已安装node及npm)之后随便在电脑上新建一个文件夹,然后执行

npm init

  然后里面需要填写的信息可以都不填写,直接一路按回车到底,会生成一个package.json的文件,发布版本时最重要的是main这个属性,这个属性是别人引用你的插件时,读取的入口文件,在这个文件里,需要你向外暴露接口。

{
"name": "npm", //项目或者插件的名字
"version": "1.0.0", //版本号,每次发布新版本的时候需要手动更新版本号
"description": "",
"main": "index.js", //入口文件,加载这个插件时读的文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "", //作者,这个名字可以是你注册npm账号的名字
"license": "ISC"
}

  下面是我现在已经完成的插件的文件结构:

  下面是我的package.json文件的配置:

{
"name": "react-image-slide",
"version": "1.0.5",
"description": "",
"scripts": {
},
"author": "mengxinghun",
"license": "ISC",
"main": "lib/index.js",
"devDependencies": {
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
"node-sass": "^3.8.0",
"react": "^15.3.0",
"react-dom": "^15.3.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}

  因为我的入口文件在lib下,所以在package.json里main下的路径为'lib/index.js'。

  在index.js里面需要把这个组件向外暴露接口,所以最外层的组件需要写成下面这样,这样别人就可以通过import加载你的插件。

export default class Parent extends React.Component{}

  这个插件现在已经发布到了npm,大家可以在刚刚 npm init的文件夹下执行以下指令来看源代码

npm i react-image-slide --save-dev

  在完成插件制作后就到了发布,执行以下命令

npm adduser    

  执行后会让输入你的npm账号的相关信息,如果出现错误,可能是你的npm版本太低,通过npm install -g npm升级一下。

  成功之后,可以通过以下命令查看npm当前使用的用户:

npm whoami 

  最后执行发布插件的命令

npm publish

  每次发布都需要发布者手动修改json文件中插件的版本号,不然发布会报错,npm社区版本号规则采用的是semver(语义化版本),主要规则如下:

版本格式:主版号.次版号.修订号,版号递增规则如下:
主版号:当你做了不相容的 API 修改,
次版号:当你做了向下相容的功能性新增,
修订号:当你做了向下相容的问题修正。
先行版号及版本编译资讯可以加到「主版号.次版号.修订号」的后面,作为延伸。

  发布完成后你就可以在npm搜索到你自己制作的插件了。

  插件在本地安装后,直接引入,并参照readme中的描述按要求做相应配置,就可以使用了。

import React from 'react'
import ReactDom from 'react-dom'
import Parent from 'react-image-slide' let imgArray = [
'http://tupian.enterdesk.com/2013/lxy/07/27/6/1.jpg',
'http://bizhi.zhuoku.com/wall/jie/20070409/huoying/113.jpg',
'http://i3.17173cdn.com/2fhnvk/YWxqaGBf/cms3/tUcIQCbjFFjdgfr.jpg',
'http://n.sinaimg.cn/games/transform/20160722/6sHg-fxuhukz0771063.jpg',
'http://img4.imgtn.bdimg.com/it/u=1422978104,3773037432&fm=21&gp=0.jpg',
] ReactDom.render(
<Parent images={imgArray} />,
document.getElementById('app')
);

  如有问题,感谢斧正,我会随时修改,让大家都能自己完成npm插件的制作。

npm插件制作及发布基础教程的更多相关文章

  1. 制作npm插件vue-toast-m实例练习

    制作npm插件vue-toast-m实例练习(消息弹窗) 一.使用npm插件 import VueToast from 'vue-toast-demo-cc' Vue.use(VueToast) th ...

  2. Ubuntu安装基础教程

    作者:TeliuTe 来源:基础教程网 二十三.安装Ubuntu14.04 返回目录 下一课 14.04 版安装与前面版本类似,学习中遇到不清楚的地方,可以参考一下前面的内容,操作中注意细心,下面来看 ...

  3. NSIS安装制作基础教程[初级篇], 献给对NSIS有兴趣的初学者

    NSIS安装制作基础教程[初级篇], 献给对NSIS有兴趣的初学者 作者: raindy 来源:http://bbs.hanzify.org/index.php?showtopic=30029 时间: ...

  4. WordPress插件制作教程(八): 最后总结

    WordPress插件教程最后一篇,还是为大家简单的做下总结.这次插件制作教程讲的内容和知识点个人觉得不是很多,因为插件制作不单单是这些内容,它涉及的知识很多很多,不是说你会一些函数就可以做出一个好的 ...

  5. chrome谷歌浏览器插件制作简易教程

    1.在磁盘上创建一个目录,用来放应用的代码和资源 2.在这个目录中,创建一个文本文件,命名为manifest.json,其内容为: { "manifest_version": 2, ...

  6. 【Unity3D基础教程】给初学者看的Unity教程(四):通过制作Flappy Bird了解Native 2D中的RigidBody2D和Collider2D

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子 在第一篇文章[Unity3D基础教程] ...

  7. WordPress插件制作教程(一): 如何创建一个插件

    上一篇还是按照之前的教程流程,写了一篇WordPress插件制作教程概述,从这一篇开始就为大家具体讲解WordPress插件制作的内容.这一篇主要说一下插件的创建方法. 相信大家都知道插件的安装文件在 ...

  8. WordPress插件制作教程概述

    接下来的一段时间里,开始为大家讲解WordPress插件制作系列教程,这篇主要是对WordPress插件的一些介绍和说明,还有一些我们需要注意的地方,以及需要掌握的知识. WordPress插件允许你 ...

  9. 【超酷超实用】CSS3可滑动跳转的分页插件制作教程

    原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷 ...

随机推荐

  1. SQL Server 通过备份文件初始化复制

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 搭建过程(Process) 注意事项(Attention) 疑问(Questions) 参考文 ...

  2. 链接(extern、static关键词\头文件\静态库\共享库)

    原文链接:http://www.orlion.ga/781/ 一. 多目标文件的链接 假设有两个文件:stack.c: /* stack.c */ char stack[512]; int top = ...

  3. vue小总结

    以下是我在使用vue过程中自己对vue的一些小总结,希望对学习vue的亲们能有所帮助: 1.   http的post请求: this.$http({url: '/someUrl', method: ' ...

  4. ImageView设置边框的两种方式

    转载:http://www.2cto.com/kf/201308/239945.html package cc.testimageviewbounds; import android.os.Bundl ...

  5. Neutron 默认安全组规则 - 每天5分钟玩转 OpenStack(115)

    Neutron 为 instance 提供了两种管理网络安全的方法: 安全组(Security Group)和虚拟防火墙. 安全组的原理是通过 iptables 对 instance 所在计算节点的网 ...

  6. 用 namspace 隔离 DHCP 服务 - 每天5分钟玩转 OpenStack(90)

    Neutron 通过 dnsmasq 提供 DHCP 服务,而 dnsmasq 如何独立的为每个 network 服务呢? 答案是通过 Linux Network Namespace 隔离,本节将详细 ...

  7. 创建第二个 local network - 每天5分钟玩转 OpenStack(84)

    GUI 中有两个地方可以创建 network: 1. Project -> Network -> Networks 这是普通用户在自己的 tenant 中创建 network 的地方. 2 ...

  8. Util应用程序框架公共操作类(十一):表达式生成器

    本篇介绍的表达式生成器,用于动态创建表达式. 在Util项目Lambdas目录中,添加ExpressionBuilder,代码如下. using System; using System.Linq.E ...

  9. MVC中处理表单提交的方式(使用html扩展方法+juqery插件)

    这里使用扩展方法来扩展基于jquery.form 插件,实现基于异步的ajax的提交方式.

  10. [c++] constexpr and literal class

    稀奇古怪的新特性,菜鸟在此啄上一啄. 1. When should literal classes be used in C++?   2. int i; // not constant const ...