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

topic-components

v1.0.4

Published

A test component demo

Downloads

5

Readme

reactComponent2npm

发布 react组件 的脚手架

相关博客(详细说明):使用npm发布一个react组件

开发组件

  • 安装依赖:

    npm i
    npm start
  • 打包组件

    npm run build

组件功能测试

  • 项目根目录下执行:

    npm link
    cd src/example
    npm link react-demo-component # 此处为package.json中定义的name字段
  • 修改example/src/app.js 文件内容(将原本导入开发组件替换成打包后的组件):

    // import ReactDemo from '../../src' // 组件源代码
    import ReactDemo from 'react-demo-component'; // npm link 测试打包组件的功能
    import 'react-demo-component/lib/main.min.css'; // npm link 测试打包组件的功能  
  • 根目录执行:

    npm start

组件发布到npm

  • 查看当前使用的源地址:

    npm config list
  • 如果不是官方源地址,通过下面的命令切换 npm 源:

    npm config set registry http://registry.npmjs.org
  • 组件发布到 npm:

    npm run pub
    # 上面的命令效果与下面的命令效果一样
    npm build
    npm publish
  • 取消发布(最好不要,别人可能下载了你的包):

    npm unpublish react-demo-component --force # 此处为package.json中定义的name字段

npm 包的使用与下载

  • 下载:

    npm i react-demo-component # 假设你的包名字叫react-demo-component
  • 使用方法:

    # 组件中引入
    import ReactDemo from 'react-demo-component';
    # 如果给组件写了样式,需要手动导入css文件
    import 'react-demo-component/lib/main.min.css';