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

react-base-library

v1.0.1

Published

自定义一个button

Downloads

3

Readme

##组件封装发布流程

1.公有组件:在github 上有个"New repository"按钮新建一个项目;

私有组件(需要管理员开通权限):如进入eaf_react_native目录(表示在此目录下创建项目),在右边有个蓝色的’New Project’按钮,点击创建新的项目;

2.将创建的项目clone到本地,在本地会生成个空的文件夹,cd进入到该文件夹目录

创建README.md文件:

$ touch README.md//创建文件

$ git add README.md//添加文件

$ git commit -m "add README.md”//提交文件

$ git push -u origin master//发布到gitlab上

同样的方法创建index.js文件;

3.在上一步目录下,执行npm init,执行后会在本地生成一个package.json文件,这个文件包含了module的所有信息,比如名称、版本、描述、依赖、作者、license等:

接下来一长串表单 按照如下格式填写

name: (react-base-library) react-base-library

version: (1.0.0)

description: 自定义一个button

entry point: (index.js)

test command:

git repository: (https://gitlab.evergrande.com/eaf_react_native/react-base- library)

keywords: custombutton

author: panxx

license: (ISC) MIT

About to write to /Users/os/Documents/gitHD/react-base-library/package.json:

{ "name": "react-base-library",

"version": "1.0.0",

"description": "自定义一个button",

"main": "index.js",

"scripts": { "test": "echo "Error: no test specified" && exit 1" },

"repository": { "type": "git", "url": "https://gitlab.evergrande.com/eaf_react_native/react-base- library" },

"keywords": [ "custombutton" ],

"author": "panxx",

"license": "MIT"

}

Is this ok? (yes) yes

附: name:填写你这个包的名字,默认是你这个文件夹的名字。不过这里要着重说一下,最好先去npm上找一下有没有同名的包。最好的测试方式就是,在命令行里面输入npm install 你要取的名字,如果报错,那么很好,npm上没有跟你同名的包,你可以放心大胆地把包发布出去。如果成功下载下来了。。。那么很不幸,改名字吧。。。

version:你这个包的版本,默认是1.0.0

description:其实我也不知道是什么,按回车就好了。。。,这个用一句话描述你的包是干嘛用的,比如我就直接:‘a plugin for express.register routes base on file path’

entry point:入口文件,默认是Index.js,你也可以自己填写你自己的文件名

test command:测试命令,这个直接回车就好了,因为目前还不需要这个。

git repository:这个是git仓库地址,如果你的包是先放到github上或者其他git仓库里,这时候你的文件夹里面会存在一个隐藏的.git目录,npm会读到这个目录作为这一项的默认值。如果没有的话,直接回车继续。

keyword:这个是一个重点,这个关系到有多少人会搜到你的npm包。尽量使用贴切的关键字作为这个包的索引。我这个包嘛,第一是在express下工作的,然后又是一个插件plugin,然后又是一个注册路由route用的,而这个路由又是基于文件目录dir,所以很好就得出我的包的索引关键字。

author:写你的账号或者你的github账号吧

license:这个直接回车,开源文件来着。。。

4、在3步骤创建的index.js文件中编写你的组件类。注意这个时候已经是一个成型的文件,可以放到一个项目中的node_modules中进行测试;

5.测试通过后接下来进行发布 注:在发布之前需要用到npm账号:如果没有npm的账号,我们需要注册一个账号,这个账号会被添加到npm本地的配置中,用来发布module用:

$ npm adduser

Username: your name

Password: your password

Email: [email protected]

注册成功可以通过$ npm whoami 查看当前使用的用户

6.执行发布$ npm publish 成功后打印出+ [email protected]