npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

amis-custom-pdf-viewer

v1.0.3

Published

amis自定义组件模板(react技术栈)

Downloads

87

Readme

react-custom-widget-template

amis自定义组件模板(react技术栈)

  • 备注:充当amis-widget-cli中的react技术栈组件模板

目录说明

  • src: 自定义组件源码;
  • src/assets: 存放组件静态资源,比如 css、img等;
  • src/widget: 组件源码;
  • src/widget/info-card.jsx: 自定义组件代码;
  • src/index.js: 用于注册一个amis渲染器,注册成功后编辑器画布区中才会正常展示自定义组件内容;
  • src/widget/plugin/info-card-plugin.jsx: 用于注册一个amis-editor插件,注册成功后编辑器左侧组件面板中会展示;
  • src/preview.js: 用于本地预览自定义组件内容;
  • amis.config.js: amis-widget-cli配置文件。

开发说明

  1. 安装依赖
$ npm i 或者 yarn
  1. dev: 本地开发模式(带热更新)

dev开发模式:用于在本地editor中调试自定义组件。

$ npm run dev
  1. preview: 组件预览模式(带热更新)

preview模式:用于预览自定义组件内容。

$ npm run preview
  1. linkDebug: 外链调试(amis-saas中预览自定义组件)

linkDebug模式:用于在amis-saas中预览和调试自定义组件。

$ npm run linkDebug
  1. build2lib: 构建自定义组件输出产物

build2lib模式:用于构建发布到 npm 中的文件,默认存放到 当前dist目录中。

$ npm run build2lib
  1. package.json添加自定义组件信息,导入组件扩展包时需要

package.json 中添加 amis-widgets 字段,用于放置当前自定义组件信息,有这个amis-widgets 字段才能被识别为amis组件扩展包。

  ...
    "amis-widgets": [
    {
      "name": "react-info-card", // 自定义组件名称,必填项
      "framework": "react", // 技术栈类型,非必填项,默认为 react 技术栈
      "usage": "renderer", // 渲染器类型,非必填项,默认为 renderer
      "type": "react-info-card", // 自定义组件类型,必填项,同一应用下不允许有重复的自定义组件类型
      "entry": "/dist/reactInfoCard.umd", // 自定义组件入口文件路径,必填项
      "files": [  // 自定义组件依赖资源文件路径,非必填项
        "/dist/reactInfoCard.css"
      ],
      "editorPlugin": {  // amis-editor自定义插件信息
        "name": "react-info-card-plugin", // 自定义插件名称,在编辑器左侧组件面板作为title展示,必填项
        "description": "信息展示卡片", // 自定义插件描述,在编辑器左侧组件面板作为描述信息展示,必填项
        "pluginEntry": "/dist/reactInfoCardPlugin.umd", // 自定义插件的入口文件,必填项
        "tag": [  // 自定义插件的分类,必填项
          "展示"
        ],
        "sort": 100 // 自定义插件的排序,非必填项
      }
    }
  ],
  ...
}
  1. 发布一个NPM组件扩展包

需要确保package.json中的name值唯一,version值不重复。

$ npm publish
  1. 发布到制定的NPM仓库

打开NPM配置文件(src/.npmrc),配置为制定仓库地址即可。

配置项说明(amis-widget-cli)

请查看amis-widget-cli