通过npm发布自己的第一个React组件 - Go语言中文社区

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


写在前面:
接触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"
    }

基于reactbabel用于将es6转成es5(因为之前用的roadhogroadhog 不会对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
项目地址

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_34013044/article/details/88906297
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2020-03-01 21:35:08
  • 阅读 ( 1222 )
  • 分类:

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢