将你的组件发布到npm平台上
npm包管理工具前端同学应该不陌生了,npm平台上有大量的优秀包,我们只需要简单几行命令就能down下来我们想要的东西,不用到处求种,而且版本控制十分方便。如何将自己的组件或者插件发布到npm平台上去,方便项目中使用和其他人使用,本文介绍如何将一个react组件发布到npm平台上去。 在实际动手之前,先要查阅资料预见困难,分析执行步骤:
组件格式发布到npm平台的包,是一个项目工程,跟我们平时工作中的项目类似,应该有完整的一套构建,开发,测试,打包压缩等步骤,所以应该把这个包当成一个项目来对待。 ?qj-button ├── example # 存放demo的代码 │ ├── src │ │ ├── ButtonPage.js │ │ └── index.js # 示例的入口文件 │ └── index.html # 示例页面 ├── lib # 真实引用编译过的代码 │ └── Button.js # 编译过的源码 ├── src # 存放源码的目录 │ └── Button.js # 组件源码 ├── style # 样式文件 │ ├── base.scss │ ├── button.scss │ └── common.scss ├── .bebalrc # babel配置文件 ├── .travis.yml # travis配置文件 ├── index.js # 项目入口文件 ├── style.css # 项目样式文件 ├── package.json ├── postcss.config.json ├── webpack.config.json # 项目开发demo的时候 需要用到的webpack └── README.md 这里要注意的点:
项目完成之后,需要添加一个入口文件 module.exports = require('./lib/Button'); exports.default = require('./lib/Button'); 需要改一下 { "main": "index.js","style": "style.css","files": [ "lib" ] } 上述代码指定入口文件和样式文件,并且发布的时候,只发布 // 不会被npm忽略的文件 package.json README (and its variants) CHANGELOG (and its variants) LICENSE / LICENCE // 一定会忽略的 node_modules .*.swp ._* .DS_Store .git .hg .npmrc .lock-wscript .svn .wafpickle-* config.gypi CVS npm-debug.log npm发布项目已经准备好了,接下来可以着手发布了。首先npm上注册账号,别忘了去邮箱验证。然后输入: npm adduser 接下来会以问答的形式向你了解你的用户名、密码以及公开的邮箱,之后输入 npm publish 然后看到进度条走,之后组件发布成功,可以到npm上搜索自己的包了。 这块可能会遇到一些报错,请看这里。 最后说一下版本管理。
持续集成一般来说你会看到一些项目README.md里面有一些icon如:
每个icon都表示一个功能,这里不多做介绍,有兴趣可以看看下列文章:
总结经过上述操作,就可以完成了向npm平台发布一个包的过程,发布到npm的组件要持续维护。 项目源码地址 参考
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |