前言:构建的ES组件使用CNPM发布内网上过程

1. 使用Create-React-APP开的组件 如果直接上传到NPM,你引用的时候会报:

You may need an appropriate loader to handle this file type.  如果你直接复制到你的项目里比如Src下是可以的。 这个原因是webpack设置了默认对node_modules文件夹中不进行babel转码,有助于提升打包效率。

因此我选择将该组件先转化为ES5语法,然后发布到 NPM 社区。 你也可以设置对其打包,这样会很慢很慢.

2. ishow UI 依赖:

yarn add react-click-outside async-validator classnames throttle-debounce raf

3.  把es6转es5:

  yarn add babel-cli babel-preset-es2015 babel-preset-react babel-preset-stage-0 cross-env --dev

4.  修改  package.json 文件main 属性为 "main": "lib/index.js"

5.  编辑 .babelrc 文件

{
"presets": [
"es2015",
"stage-0",
"react"
]
}

, 你也可以不编写这个文件,那么babel会调用package.json里的 babel-preset-react-app来转换,因为你的package.json里有如下配置:

"babel": {
"presets": [
"react-app"
]
},

6.  在你的package.sjon script:里增加如下命令:

"es6": "cross-env NODE_ENV=production npx babel src --copy-files --extensions .js,.jsx --out-dir lib"  这个表示把 src下面的所有js jsx文件打包到lib目录下,其它文件直接复制过去。
    1).这里如果不设置NODE_ENV=production babel不工作
               2).如果有.babelrc文件打包出来的是纯es5, 如果没有打包出来的是es6
               3)如果是window平台可以直接set  NODE_ENV=production 然后运行 npx babel src --copy-files --extensions .js,.jsx --out-dir lib
 
然后yarn run es6即可生成lib文件目录,把这个集成到npm里即可调用 
 
 7.上传项目到NPM,如果你使用cnpm

1. cnpm  set registry http://npm.你们的域名.org/  如果是公网不需要这一步

2. cnpm login
      type username and password with domain account
3. cnpm pub

 
 

使用CRA开发的基于React的UI组件发布到内网NPM上去的更多相关文章

  1. uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...

  2. 如何基于 React 封装一个组件

    如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...

  3. 小程序开发-6个优秀的UI组件库

    微信小程序开发,当原生的控件不能满足我们时,可以尝试下面几个比较优秀的组件库. 1. WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验. ...

  4. 基于react hooks,zarm组件库配置开发h5表单页面

    最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...

  5. 前端004/React常用UI组件

    每天进步一点点〜 Ant Design of React //蚂蚁金服设计平台.需要应用何种类型组件可参考API React + mobx + nornj 开发模式文件说明: [1].A.t.html ...

  6. [闲的蛋疼系列]从零开始用TypeScript写React的UI组件(0)-先写一个Button??

    0.咸鱼要说的 一入前端深似海,咸鱼入海更加咸. 最近闲的蛋疼,手上年前的事也完成了7788了,借助[PG1]的话来说,我们要keep real. 咸鱼肯定不real 了,因为我们都活在梦里,所以咱们 ...

  7. 可以结合react的ui组件

    https://ant.design/components/switch-cn/

  8. 基于react的audio组件

    样式请自己定义哦~需要其他功能请自行添加! // 组件调用 <Audio src={src地址} id={srcID}/> audio属性 src 歌曲的路径 preload 是否在页面加 ...

  9. 基于nginx负载均衡及frp的内网穿透实例3-多用户多网站共用80端口

    原文地址:点击跳转 最近frp用户量有点多,而且很多用户都是想把部署于本地或者内网的web服务暴露至公网,之前提到过,暴露到公网之后如果一般都需要用域名:端口的方法来访问,但是没有人会喜欢用这种方式访 ...

随机推荐

  1. redis cluster 实践总结

      最近项目接触到了redis cluster,现在趁着使用做一下总结,记录一下遇到过的问题,简单的概述一下常用到的命令和功能. 本篇文章主要是以运维的角度去讲述如何去更好的规划redis clust ...

  2. 【LeetCode】046. Permutations

    题目: Given a collection of distinct numbers, return all possible permutations. For example,[1,2,3] ha ...

  3. 洛谷【P3437】[POI2006]TET-Tetris 3D

    浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 浅谈标记永久化:https://www.cnblogs.com/AKMer/p/1013 ...

  4. BZOJ3784:树上的路径

    浅谈树分治:https://www.cnblogs.com/AKMer/p/10014803.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem. ...

  5. 前端PHP Session的实例

    登陆例子:(请注意一定要自己敲一遍,不要CV大法) 首先上一下成果图,激起同学们写的欲望,登录页如下:  点击登陆之后如下: 说明哦了,么问题.接下来自己实现一下. 首先数据库信息: 新建一个名为 l ...

  6. Spring 3.1新特性之三:Spring支持Servlet 3.0(待补充)

    高效并发是JDK 1.6的一个重要主题,HotSpot虚拟机开发团队在这个版本上花费了大量的精力去实现各种锁优化技术,如适应性自旋(Adaptive Spinning).锁削除(Lock Elimin ...

  7. Java基础知识之常见关键字(1)

    static 特点: 随着类的加载而加载 优先于对象存在 被所有对象所共享 可以直接被类名调用 注意点: 静态方法只能访问静态方法 但是非静态成员可以直接访问静态成员 静态方法中不可以使用this , ...

  8. 滴滴Booster移动APP质量优化框架 学习之旅 三

    推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅 一 Android 模块Api化演练 不一样视角的Glide剖析(一) 滴滴Booster移动App质量优化框架-学习之旅 二对重复资源 ...

  9. win7 卸载ie10+ 重新安装ie8

    烦恼: erp系统不支持高版本ie10+ 项目开发测试需要安装了高版本ie 项目结束,为了方便使用erp,决定卸载ie11,重新安装ie8 解决方法: 1.win+R打开运行命令,键入appwiz.c ...

  10. HDU - 6383 百度之星2018初赛B 1004 p1m2(二分答案)

    p1m2  Accepts: 1003  Submissions: 4595  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 131072 ...