从零开始封装React UI 组件库并发布到NPM

1.新建目录wui

(1)进入到 wui 目录 执行 npm init 命令初始化项目。更具提示信息填充将会生成的 package.json 文件。

(2)新建 webpack.config.js 打包文件。

(3)新建 README.md 项目说明文件。

(4)新建 .gitignore 项目忽略文件。

(5)安装webpack 用于编译 JavaScript 模块。

npm install webpack webpack-cli --save-dev

package.json 字段含义解释:1.name 包名,如果有重名可以添加 scoped 前缀,例如(@winyh/wui)2.verson 版本号,每次发布版本前需要递增修改版本号3.description 包简介。4.private 是否私有。一定要设置为 false5.main 项目入口。6.directorities 描述模块的结构,暂时可以忽略。7.scripts 执行脚本,可以在这里添加自定义的执行脚本。8.registory 仓库地址,设置代码所在仓库地址。9.keywords 关键字,设置仓库的关键字,方便检索。10.author 作者,可以输入作者名称。11.license 许可协议。12.bugs 提交地址。13.homepage 项目主页。14.devDependencies 开发环境依赖包记录。


发布:1.修改package.json文件,添加 "private": false 设置当前组件库为非私有的。否则 npm publish 会报错。2.修改 version 版本号,npm 发布版本时,会向上叠加(v0.0.1 -> v0.0.2)。发布前不修改版本号也会报错。3.执行 npm login 登录 npm 账户(需要现在官网注册npm账号)。4.执行 npm publish 发布最新版本。(发布成功后一般注册邮箱会收到发布版本的消息)


原文地址:https://www.cnblogs.com/winyh/p/11822896.html

时间: 2024-11-08 01:46:55

从零开始封装React UI 组件库并发布到NPM的相关文章

vue封装组件,类似elementUI组件库打包发布到npm上

封装vue组件库的两种方法和形式: 一:是建立一个webpack-simple 项目 二:是在通过vue-cli脚手架建立webpack vue项目,这种项目有点冗余,可是我们对这种项目最熟悉 下面分别介绍两种用法: 一: 1.首先先建立一个vue项目: 通过vue init webpack-simple,新建项目目录如下: 箭头指的是在项目打包后产生的文件(打包命令npm run build ) 2.在src下新建一个目录用来存放组件源码: 然后写封装的组件,比如radios/radio.vu

【转】从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)

自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合vue.js 就不需要webpakc这种构建工具了,可以直接在页面内使用,下面以 ‘yyl-npm-practice’ 这个包为例 第一步:使用 vue init webpack-simple yyl-npm-practice   初始化项目 提示: 不要用 vue init webpack npm

创建一个自己的Vue UI组件库,并将它发布在npm上

本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新. 前期准备 初始化project 这里我们使用vue-cli来初始化一个vue项目. npm install -g @vue/cli or yarn global add @vue/cli vue create personal-component-set 首先我们来开发一个可复用的顶栏控件,这里

Docz 用 MDX 写 React UI 组件文档

Docz 用 MDX 写 React UI 组件文档 前言 为了提升开发效率,创建一套 UI 组件库是一种较为有效的方式之一:可以减少重复工作.提高可复用,所以现在越来越多团队开始创建自己的 UI 组件库.较早的 Twitter 的 Bootstrap 虽然只能称为 UI 库,但也大大提升了开发效率.后面 MVVM 大行其道 ,前端终于可以把 HTML.CSS.JS 放在一起开发包含 UI .交互真正意义上的组件了,现在有基于 React 的 Material-UI.国内阿里金服基于 React

一枚前端UI组件库 KUI for React

一枚前端UI 组件库 for React 在追求完美视觉体验的同时也保证了其性能高效. 欢迎使用 .批评.指正.吐槽.Star? 特性 漂亮的UI,可定制主题 兼容IE9+ 组件丰富,功能强大 更新日志 logs:https://react.k-ui.cn/#/log 文档 Docs : https://react.k-ui.cn Github: https://gitee.com/chuchur/kui-react 安装 npm install react-kui 使用 ```js impor

介绍推荐优秀的Vue UI组件库

Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用.开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了.在选择Vue UI组件库的过程中,通过GitHub上根据star数量.文档丰富程度.更新的频率以及维护等因素,也收集整理了一些优秀的Vue UI组件库. 下载资源:www.yi

【转】优秀的Vue UI组件库

原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用.开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了.在选择Vue UI组件库的过程中,通过GitHub上根据star数量.文档丰富程度.更新的频率以及维护

造个自己的Vue的UI组件库类似Element

前言 随着前端的三大框架的出现,组件化的思想越来越流行,出现许多组件库.它能够帮助开发者节省时间提高效率, 如React的Ant-design,Vue的iView,Element等,它们的功能已经很完善了. 我写这遍文章的目的:记录自己搭建UI库的过程(对Vue的理解加深了好多)演示地址首先讲一下思路: 平常写组件时,写一个组件要用时直接导入就行了,如你写了一个time.vue,用的时候 import time from '路径' 现在要写一个组件库,是不是把所有组件一个文件夹里(如button

[转]VUE优秀UI组件库合集

原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.vue等框架为代表推动的组件化开发模式越来越被开发者认可,这种模式极大的降低了我们开发与维护的成本.vue作为一款深受广大群众以及尤大崇拜者的喜欢,特此列出在github上开源的vue优秀UI组件库供大家参考,期待开发者们推出更多优秀的组件库. 本文分为两大部分介绍:PC端和移动端. 首先介绍PC端