使用CRA开发的基于React的UI组件发布到内网NPM上去
前言:构建的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:里增加如下命令:
1. cnpm set registry http://npm.你们的域名.org/ 如果是公网不需要这一步
2. cnpm login
type username and password with domain account
3. cnpm pub
使用CRA开发的基于React的UI组件发布到内网NPM上去的更多相关文章
- uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤
uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...
- 如何基于 React 封装一个组件
如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary , ...
- 小程序开发-6个优秀的UI组件库
微信小程序开发,当原生的控件不能满足我们时,可以尝试下面几个比较优秀的组件库. 1. WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验. ...
- 基于react hooks,zarm组件库配置开发h5表单页面
最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...
- 前端004/React常用UI组件
每天进步一点点〜 Ant Design of React //蚂蚁金服设计平台.需要应用何种类型组件可参考API React + mobx + nornj 开发模式文件说明: [1].A.t.html ...
- [闲的蛋疼系列]从零开始用TypeScript写React的UI组件(0)-先写一个Button??
0.咸鱼要说的 一入前端深似海,咸鱼入海更加咸. 最近闲的蛋疼,手上年前的事也完成了7788了,借助[PG1]的话来说,我们要keep real. 咸鱼肯定不real 了,因为我们都活在梦里,所以咱们 ...
- 可以结合react的ui组件
https://ant.design/components/switch-cn/
- 基于react的audio组件
样式请自己定义哦~需要其他功能请自行添加! // 组件调用 <Audio src={src地址} id={srcID}/> audio属性 src 歌曲的路径 preload 是否在页面加 ...
- 基于nginx负载均衡及frp的内网穿透实例3-多用户多网站共用80端口
原文地址:点击跳转 最近frp用户量有点多,而且很多用户都是想把部署于本地或者内网的web服务暴露至公网,之前提到过,暴露到公网之后如果一般都需要用域名:端口的方法来访问,但是没有人会喜欢用这种方式访 ...
随机推荐
- 「LOJ#10056」「一本通 2.3 练习 5」The XOR-longest Path (Trie
#10056. 「一本通 2.3 练习 5」The XOR-longest Path 题目描述 原题来自:POJ 3764 给定一棵 nnn 个点的带权树,求树上最长的异或和路径. 输入格式 第一行一 ...
- MySql 扩展存储引擎
MySql 扩展存储引擎 下面介绍几个列式存储引擎(都有两个版本:社区版.商业版): 一:TokuDB TokuDB 是一个高性能.支持事务处理的 MySQL 和 MariaDB 的存储引擎.Toku ...
- python--面向对象(最全讲解)
http://www.cnblogs.com/Eva-J/articles/7293890.html 阅读目录 楔子 面向过程vs面向对象 初识面向对象 类的相关知识 对象的相关知识 对象之间的交互 ...
- C# GUID使用总结
全局唯一标识符(GUID,Globally Unique Identifier) What is GUID 也称作 UUID(Universally Unique IDentifier) . GUID ...
- 数据库和ADO
数据库语言 数据库的简易流程(数据库客户端软件和数据库服务软件的执行流程) 主键的概念 如何创建主键 如何创建外键 主外键关系的概念以及使用 数据库的主要类型 数据库的主要数据类型 使用SQL语句来创 ...
- WPF Get Multibinding Expression, Update Source,
wpf 拿到某个control的multibinding以及其中每个Binding 1. 拿到multibinding MultiBindingExpression mbe = Bindin ...
- Spring框架中的@Import、@ImportResource注解
spring@Import @Import注解在4.2之前只支持导入配置类 在4.2,@Import注解支持导入普通的java类,并将其声明成一个bean 使用场景: import注解主要用在基于ja ...
- lwip 分析一
一.接收端 1.通过ehternetif_input void ethernetif_input(struct netif *netif) { struct ethernetif *etherne ...
- Object中的方法
1.equals() 2.toString() package com_package1; public class Person44 { private int age; public int ge ...
- Hive安装 …
Hive安装 mysql使用主机(win7)上的mysql数据库,启动后,要关闭360和win7自带的防火墙,确保在虚拟机里能拼通主机********************************* ...