脚本宝典收集整理的这篇文章主要介绍了

将你的组件发布到npm平台上

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

npm包管理工具前端同学应该不陌生了,npm平台上有大量的优秀包,我们只需要简单几行命令就能down下来我们想要的东西,不用到处求种,而且版本控制十分方便。如何将自己的组件或者插件发布到npm平台上去,方便项目中使用和其他人使用,本文介绍如何将一个react组件发布到npm平台上去。

在实际动手之前,先要查阅资料预见困难,分析执行步骤:

  1. 一个包的格式,应该有哪些东西。
  2. 将项目发布到npm平台上去。
  3. 持续集成。

组件格式

发布到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

这里要注意的点:

  1. 原文件:项目原文件在src下,原文件用ES6编写。原文件不可直接使用,需要打包编译之后才能使用。
  2. 编译:这里的编译有两种方式:使用babel编译;使用webpack编译。前者只能编译js,后者则可以编译很多类型的文件。我这里使用的babel编译,命令:./node_modules/.bin/babel src --copy-files --source-maps --extensions .js --out-dir libsrc目录下的js文件编译到lib目录下。
  3. 样式:scss样式引入也有两种:使用sass命令编译,输出到根目录style.css;使用webpack编译src文件的时候,将样式打包编译到js文件里。两者区别也很明显:前者需要手动编译,也需要手动引入,比较麻烦,但是文件独立,方便管理;后者自动编译,样式扩展性较差。各有取舍。
  4. demo:项目里有个example文件夹,里面是项目示例代码,本地开发的时候跑的项目;也有的包里面是docs文件夹,文档形式介绍。
  5. 测试:有的包本地开发的时候会有测试脚本,本地会有一个test文件夹,用于存放测试脚本。

项目完成之后,需要添加一个入口文件index.js,将你的组件导出:

module.exports = require('./lib/Button');
exports.default = require('./lib/Button');

需要改一下package.json里面的配置文件:

{
  "main": "index.js",
  "style": "style.css",
  "files": [
    "lib"
  ]
}

上述代码指定入口文件和样式文件,并且发布的时候,只发布lib目录下文件和其余根目录的文件,其余的文件夹里的会传到github上,并不会被发布到npm平台上。

// 不会被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上搜索自己的包了。

这块可能会遇到一些报错,请看这里

最后说一下版本管理。

一般来说版本分成三部分:A.B.C

  1. A表示大版本号,一般是项目较大改动的时候修改,可以参考理解iOS6 更新到iOS7 时候界面大幅改动;A为0的时候,表示项目处于开发阶段。
  2. B表示功能更新,或者项目模块改动的时候增加。
  3. C表示小改动,如修bug。

持续集成

一般来说你会看到一些项目README.md里面有一些icon如:
将你的组件发布到npm平台上-脚本宝典
这些icon看起来很牛逼,但也不只是装逼用的。

持续集成(Continuous integration)的目的,就是让产品可以快速迭代,同时还能保持高质量。它的核心措施是,代码集成到主干之前,必须通过自动化测试。只要有一个测试用例失败,就不能集成。

每个icon都表示一个功能,这里不多做介绍,有兴趣可以看看下列文章:

  1. 跟踪Github项目的持续集成状态
  2. 使用travis-ci集成一个vue.js项目

总结

经过上述操作,就可以完成了向npm平台发布一个包的过程,发布到npm的组件要持续维护。

项目源码地址

参考

  1. 八步亲手用npm开发React
  2. 在npm上发布你的组件
  3. 如何使用 ES6 编写一个 React 模块, 并且编译后发布到 NPM
  4. 如何发布Node模块到NPM社区

总结

以上是脚本宝典为你收集整理的

将你的组件发布到npm平台上

全部内容,希望文章能够帮你解决

将你的组件发布到npm平台上

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过