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

上一篇: React 编程风格指南下一篇:时间轴组件react-native-step-in...

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

发布时间：2019-08-05 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了通过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加入


      
      
      
      
      
   @H_126_71@"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';


简单粗糙的效果

项目地址