通过npm发布自己的第一个React组件

写在前面:
接触react也有四五个月了，越撸越爽。写了些组件却难以管理起来，就打算把组件放在npm上，就花了点时间上网找了点资料学习了下怎么发布到npm上。下面整理了下。

1.npm注册，github注册。（这两个都十分容易，网上的教程很多，在这就不一一叙述了）

2.在github新建个项目

3.git clone下来之后进入到项目目录 执行npm init

• name:发布的名称
• version：版本号
• entry：入口文件

3.执行npm adduser

4.接下来讲讲具体该怎么封装

a.安装些依赖 在package.json加入

"devDependencies": {
   "babel-cli": "^6.0.0","babel-core": "^6.14.0","babel-loader": "^6.2.5","babel-plugin-istanbul": "^2.0.1","babel-preset-es2015": "^6.14.0","babel-preset-react": "^6.24.1","react": "^15.6.1","react-dom": "^15.6.1"
    }

基于react，babel用于将es6转成es5（因为之前用的roadhog，roadhog 不会对node_modules
下的js进行转换）

b.项目结构

c.文件 SmallButton.js

入口文件index.js

.babelrc (babel配置)

5.把es6转为es5
在package.json中加入

"build": "babel src --out-dir lib"

运行npm run build将src目录下的文件输出到lib目录下

6.发布 npm publish

看到这样就成功啦

7.项目中引入

在pakeage.json中写入

"smallbutton": "^1.0.0"
执行npm i

import { SmallButton } from 'smallbutton';

简单粗糙的效果

写在后面：
https://github.com/chaelaugh/... --这个文章的demo地址

https://github.com/chaelaugh/... --我写的一个能收起展开的组件

npm i laughview

import { Cardlayout } from 'laughview';

毕竟是刚开始做的组件，出错在所难免，也不求各位见谅，但是发现问题尽管提出，留下评论，或者在github上写下issues。 :) thx.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!