如何制作react组件包上传到npm

虽说现在市面上组件库相当多了，但是还有一些组件特定场景市面上没有，公司内部一些不同项目，有类似相同组件可以直接复用，避免重复造轮子，就可以直接制作一个npm包，下次直接使用。

注意：文中的每一步都很重要，都是踩过的坑

1、注册npm账号

地址： https://www.npmjs.com/signup

注意：注册完后，记得验证你的邮件地址！一定！否则会在提交组件包的时候报403错误，那是因为没有验证你的邮箱。

1、创建新的文件夹

2、进入该文件夹，使用cmd命令，npm进入安装项目流程

3、对应的字段：

有需要可以自行安装自己要的依赖，上面几个是我写组件必要的几个依赖，因为我没有写对应的依赖版本所以安装时候会以最新版本安装。

1、新建如下目录结构和文件

2、编写webpack.config.js的配置，以下是最基础的配置

上面的less-loader没有启用lessmodules模块化比较不好，假设现在项目有好几个组件，那么模块化就可以避免我们不同组件的样式污染，如果不开启就不生效，如下例子：

所以得将webpack.config.js修改如下：

接下来往babel.config.js添加编译时候需要的loader配置：

3、编写组件

这个是核心部分，就是说这里是你的组件

------------- ./src/index.jsx

------------- ./src/index.less

4、对外暴露组件，编辑根目录下的index.js文件

我这里叫Test，使用组件包引入时候就是Test组件。别人在引用组件包时候会从该文件作为入口（package.json的main字段可以配置），这个文件有两种写法，第一种：

第二种：

5、编写webpack读取的入口文件 public/app.js

webpack启动、编译、打包都会从这个文件作为入口（webpack那边配置的）

6、编写html模板，public/index.html文件。

我们知道spa单页面都是依据一个html模板上面引入js创建虚拟dom生成到这个html上面，所以需要有一个挂载的实例模板。

7、编写.gitignore文件

这个文件可以配置git上传时候忽略培氏哪些文件不想传上去，同时发布组件包的时候它也会拍旦按照这个文件来，忽略哪些不上传。

8、添加项目启动命令：修改package.json文件

给该文件的scripts里添加两个系统命令，一个是启动命令，一个是打包命令（制作组件包用的比较少）。注意webpack4的版本可能不是 webpack server --mode development，这个需要自己对应版本。

说明是node版本问题，需要安装高点版本的node，可以使用nvm来管理node版本，这里不多说，我切换为node 12.0.0版本就可以。

到此为止，我们已经配置好了工程，配贺散接下来需要把组件包发布上去

1、发布规则

例如你是淘宝源你需要：

查看设置过的所有的源：npm config get registry

设置当前源为npm： npm config set registry https://registry.npmjs.org/

发布完成后设置回淘宝源：npm config set registry https://registry.npm.taobao.org

2、发布流程

1、登录注册好的npm账号：npm login

输入对应的账号、密码、邮箱即可

reactjs 网站建设中常用的组件,基本涵段梁盖了项目日常所需

griddle-react

react-bootstrap

react-cropper

core-js

Modular standard library for JavaScript. Includes polyfills for ECMAScript 5, ECMAScript 6: promises, symbols, collections, iterators, typed arrays, ECMAScript 7+ proposals, setImmediate, etc

Material UI

superagent

restful-error-es6

browserify

react-select-popover

react-infinite-scroll

semantic-ui

react-date-range日期选择

react-scroll 快速定位滚动

react-timer-mixin suer timer

react-autosuggest auto input

react-native-swiper轮播

react-split-container分割线拖拽

reactjs-iscroll下拉上拉刷新

react-hammerjs触屏事件库

react-emoji-react emoji表情库

react-ace在线编辑器

react-highcharts highchart

react-dropzone 上传

react-fileupload-progress文件上传带processor

react-fontawesome 字体icon库

react-pdf pdf文档 *** 作

react-desktop桌面UI

react-intl Internationalize React apps

react-image-gallery图片轮播

react-s-alert alert

react-event-calendar事件日历

react-color-picker 颜色选择器

react-lazy-load 延迟加载

react-tag-input tag input

revalidator格式验证

react-bootstrap-daterangepicker时间范围

react-transitive-number增减数

react-css-transition-replace动画

react-images image list

react-clockwall 时间画布

react-autobind fun auto bind

react-simple-markdown-editor markdown编辑

react-remarkable markdown 显示

random-gem 随机数

react-masonry-component 瀑布流

react-alap 高德地图

react-baidu-map 百度源袜地图

react-swipeable-views views滑动

react-swipnable-tabs 可横向滚动的tab

react-motion 动画

react-image-fallback 图片lazy加载

react-mobile-datepicker 滚动选择时间

react-images 幻灯片灯箱

react-image-magnify 图片细节放大

urlencode node encode编码

react-mobile-datepicker 滚动选择时间 年月日

react-mobile-datetimepicker滚动选择时间 年月日时分

react-fastclick消除touch click 300ms延迟

react-sortable react-anything-sortable 拖动排序

/ 6-20补充 /

react-autosuggest 自动提雹燃激示

react-image-crop 图片裁剪

ua-device ua判断系统及版本

react-debounce-input 输入延迟，适合做autocomplete

react-big-calendar 基于fullcalendar的日程组件

^-^欢迎回复交流^-^

我的项目中充斥着大量的视频、音频、和图片上传，像这种情况，将组建封装成一个，在使用时直接引入传入一些配置项，必定是高效的作业方式

新建一个upload文件

config来自于父组件，组件内部会根据config中的参数做一些处理

upBtnRef是antd的upload组件内的button组件，它的样式该起来麻烦的要死，因此我就直接将其visibility: "hidden",然后通过ref注册引用以达到触发上传的目的

fakeUpBtnRef是考虑到向父组件提供一个调用上传的接口，方便父组件自定义自己的样式，然后trigger到我们的上悔拆传碧册枣组件。这将在useEffect中将组件的引用抛姿迹给父组件

isDefaut则用户进行上传前后的图片标识替换

actUrls则保持每一个组件激活的图片标识，这将对同一个组件中使用上传列表时有用

switch语句将根据不同上传类型设置可选择的文件类型

getBase64则将我们上传的图片转化为可展示的形式

onUploadChange则对我们的上传进度作监听，由于只有图片是可转化的，故对于音频和视频只需要切换其激活图标即可

getActImgUrl则用于图片列表时获取每一个组件的图片地址

最后页面结构如下

使用

---