发布你的组件到webcomponents.org

beta.webcomponents.org是一个可以:

  • 发布自己的自定义组件或组件集合
  • 查看别人发布的自定义组件或组件集合
  • 查看组件的readme、demo及API文档

的网站。事实上Polymer的Element Catalog已经会重定向到这里。
本文会介绍一下怎么在上面发布自己的组件。

Publish your element已经很详细地讲解了如何发布及相关细节,本文只是对其的翻译、整理。

组件要求

你的组件必须符合下面要求:

  • 使用开源许可。没特殊要求的话可以直接使用非常自由的MIT;把写好的许可文件保存在项目根目录下的LICENSE就可以了。
  • Tag & Release。你需要对你的项目打tag,最好是使用语意化版本。
  • Readme。你可以直接使用模板;另外webcomponents.org支持直接在Readme中显示demo,这个我们会在下文提到。

Release(打tag)步骤:

  • checkout到合适的分支或commit,然后运行git tag [version],例如git tag v0.1.0
  • git push origin v0.1.0

发布!

完成上述的准备后:

  • 进入Publish your element
  • 找到中间的"Ready to publish?"
  • 输入github项目的地址,[username]/[project_name]
  • 勾选"I'm not a robot"
  • 点击Publish

Better Readme

下面是一些可选的功能。

添加徽章

你可以添加这个一个徽章:


到你的项目readme里,声明这已经是一个webcomponents.org发布的组件。
直接复制下面代码到你的项目readme.md里。

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/owner/my-element)

在Readme里显示demo

Webcomponents.org可以在展现项目Readme的时候直接根据里面的代码来显示demo:

<!--
```
<custom-element-demo>
  <template>
    <link rel="import" href="my-element.html">
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```
<my-element></my-element>
```

HTML注释内的内容就是最后会显示的demo内容;next-code-block会将注释下一段的例子代码(my-element那段)生成在demo内。
HTML注释内的内容可以自由编辑,例如你想有一个特定高度的div来撑开body:

    <div style="height: 200px">
      <next-code-block></next-code-block>
    </div
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,868评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,024评论 25 708
  • 下面这件事件这是我高三那年发生的… 那天,寒风吹到脸上都生疼生疼的。我下了艺考班统一去校考的大巴车上。羽绒服根本挡...
    Moniii阅读 254评论 1 1
  • 收到读书分享会秘书发来的通知,晚上又是我们每周一次的读书分享会时间了,打开读书笔记把新的读后感补充上去。自从加入系...
    心梦飞翔h阅读 263评论 0 1