前言:构建的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. 「LOJ#10056」「一本通 2.3 练习 5」The XOR-longest Path (Trie

    #10056. 「一本通 2.3 练习 5」The XOR-longest Path 题目描述 原题来自:POJ 3764 给定一棵 nnn 个点的带权树,求树上最长的异或和路径. 输入格式 第一行一 ...

  2. MySql 扩展存储引擎

    MySql 扩展存储引擎 下面介绍几个列式存储引擎(都有两个版本:社区版.商业版): 一:TokuDB TokuDB 是一个高性能.支持事务处理的 MySQL 和 MariaDB 的存储引擎.Toku ...

  3. python--面向对象(最全讲解)

    http://www.cnblogs.com/Eva-J/articles/7293890.html 阅读目录 楔子 面向过程vs面向对象 初识面向对象 类的相关知识 对象的相关知识 对象之间的交互 ...

  4. C# GUID使用总结

    全局唯一标识符(GUID,Globally Unique Identifier) What is GUID 也称作 UUID(Universally Unique IDentifier) . GUID ...

  5. 数据库和ADO

    数据库语言 数据库的简易流程(数据库客户端软件和数据库服务软件的执行流程) 主键的概念 如何创建主键 如何创建外键 主外键关系的概念以及使用 数据库的主要类型 数据库的主要数据类型 使用SQL语句来创 ...

  6. WPF Get Multibinding Expression, Update Source,

    wpf 拿到某个control的multibinding以及其中每个Binding 1. 拿到multibinding      MultiBindingExpression mbe = Bindin ...

  7. Spring框架中的@Import、@ImportResource注解

    spring@Import @Import注解在4.2之前只支持导入配置类 在4.2,@Import注解支持导入普通的java类,并将其声明成一个bean 使用场景: import注解主要用在基于ja ...

  8. lwip 分析一

    一.接收端 1.通过ehternetif_input void ethernetif_input(struct netif *netif) {   struct ethernetif *etherne ...

  9. Object中的方法

    1.equals() 2.toString() package com_package1; public class Person44 { private int age; public int ge ...

  10. Hive安装&nbsp;&nbsp;&nbsp;&nbsp;…

    Hive安装 mysql使用主机(win7)上的mysql数据库,启动后,要关闭360和win7自带的防火墙,确保在虚拟机里能拼通主机********************************* ...