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

Hancock_Xu 发布于2019-08-21 18:38 / 484人阅读

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

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

简单粗糙的效果
项目地址

GPU云服务器云服务器每周数百万下载量!NPM包修复了一个远程监控自己组件服务器怎么发布自己的网站 php通过自己手机发送短信验证码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90673.html

发布 react 组件到 npm 上

摘要：我发布了我的第一个组件，一个基于的标签云组件。然后将这个编译命令写到里，如下那么以后要编译下面的代码，只需要执行现在我们已经有编译好的代码了，接下来就可以发布到供其他人使用了。我发布了我的第一个 npm 组件，一个基于 react 的 3d 标签云组件。在这途中我也是遇到了很多的坑，花在完善整个发布流程的时间远多于写这个组件本身的时间，所以我记录下我觉得一个正常的 react 组件的...

Yi_Zhi_Yu 2019-08-23 15:05 评论0 收藏0
高性能迷你React框架 anu1.2 发布，支持React16的三大特性

摘要：支持的三大特征，组件支持返回数组，传送门与错误边界。下面是新支持的特性的第一个参数可以是数组，字符串，数字，。有了它，成为对错误处理最完善的框架。虚拟的结构发生变化，每个节点都有等描述自己位置的属性。 anu已经有两个月没有发布了，经过1.1.5-pre, 1.1.5-pre2, 1.1.5-pre3, 1.1.5-pre4, 1.1.5-pre5, 1.1.5-pre6, 最终放弃了...

whidy 2019-08-22 11:19 评论0 收藏0
2018年前端开发回顾

摘要：在整个年，看到发布版增加了许多功能，包括新的生命周期方法新的上下文指针事件延迟函数和。它在等待渲染异步响应时数据，是延迟函数背后用来管理组件的代码分割的。发布自第版开始将近年后，于年发布。前端发展发展迅速,非常的快。本文将回顾2018年一些重要的前端新闻，事件和 JavaScript 趋势。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ showImg(ht...

crelaber 2019-08-23 14:12 评论0 收藏0
从搭建脚手架到在npm上发布react组件

摘要：从搭建脚手架到在上发布组件最近公司给公司里架设了私有的仓库，相应地也需要一个用来发布组件用的脚手架，在这个过程中又又又又复习了一下，在这里分享下脚手架搭建的过程。从搭建脚手架到在npm上发布react组件最近公司给公司里架设了私有的npm仓库，相应地也需要一个用来发布react组件用的脚手架，在这个过程中又又又又复习了一下webpack，在这里分享下脚手架搭建的过程。首先，我们预...

junfeng777 2019-08-23 14:36 评论0 收藏0