mysmallbutton
v2.0.0
Published
通过npm发布自己的第一个React组件 react.js npm es6 javascript 3.1k 次阅读 · 读完需要 6 分钟 写在前面: 接触react也有四五个月了,越撸越爽。写了些组件却难以管理起来,就打算把组件放在npm上,就花了点时间上网找了点资料学习了下怎么发布到npm上。下面整理了下。
Downloads
5
Readme
通过npm发布自己的第一个React组件 react.js npm es6 javascript 3.1k 次阅读 · 读完需要 6 分钟 写在前面: 接触react也有四五个月了,越撸越爽。写了些组件却难以管理起来,就打算把组件放在npm上,就花了点时间上网找了点资料学习了下怎么发布到npm上。下面整理了下。
1.npm注册,github注册。(这两个都十分容易,网上的教程很多,在这就不一一叙述了)
2.在github新建个项目 clipboard.png
3.git clone下来之后进入到项目目录 执行npm init
clipboard.png
name:发布的名称 version:版本号 entry:入口文件 3.执行npm adduser
clipboard.png
4.接下来讲讲具体该怎么封装
a.安装些依赖 在package.json加入
clipboard.png
"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.项目结构 clipboard.png
c.文件 SmallButton.js clipboard.png
入口文件index.js
clipboard.png
.babelrc (babel配置)
clipboard.png
5.把es6转为es5 在package.json中加入
clipboard.png
"build": "babel src --out-dir lib" 运行npm run build将src目录下的文件输出到lib目录下
6.发布 npm publish
clipboard.png
看到这样就成功啦
clipboard.png
7.项目中引入
在pakeage.json中写入
"smallbutton": "^1.0.0" 执行npm i
import { SmallButton } from 'smallbutton';
简单粗糙的效果 clipboard.png
项目地址 https://github.com/kingson314/smallbutton