github 开源地址:zswui

github 说明文档:wiki

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

  

(6)安装 babel 相关的编译库,将javascript 代码转换成 浏览器兼容的代码。

npm install babel-loader @babel/core --save-dev

  

(7)给 webpack.config.js 配置 babel-loader 解析信息,。

// module 表示模块信息
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}

  

(8)创建 .babelrc 文件

虽然已经配置好了 Babel ,但并没有让它真正生效。在项目的根目录中创建一个 .babelrc 文件并启用一些插件

首先,你可以使用转换 ES2015+ 的 env preset 。

npm install @babel/preset-env --save-dev

  

为了让 preset 生效,你需要像下面这样定义你的 .babelrc 文件

{
"presets": ["@babel/preset-env"]
}

  

(8) 安装 编译 jsx 语法的库

npm install --save-dev @babel/preset-react

  修改.babelrc文件配置

{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}

  

(9) 安装 html-webpack-plugin 插件,生成 html 文件.配置到 webpack.config.js 文件

npm install  html-webpack-plugin  --save-dev

  

(10) 安装 react 相关的包

npm i react react-dom --save-dev

  

(11) 安装 webpack-dev-server 作为本地开发环境

npm  i webpack-dev-server -g

  

(12) 在 package.json文件中添加自定义启动脚本

"scripts": {
"start": "webpack --config webpack.config.js",
"test": "npm run test"
}

  

(13) 安装清理文件夹的插件

npm install clean-webpack-plugin --save-dev

  

(14) 安装提取 css 到一个文件的库

npm install --save-dev extract-text-webpack-plugin

  

(15) 安装支持 sass / less 文件的库

npm install --save-dev style-loader css-loader
npm install --save-dev less-loader less
npm install sass-loader node-sass webpack --save-dev
配置 webpack.config.js (14,15 步骤配合操作)

  



package.json 字段含义解释:
1.name 包名,如果有重名可以添加 scoped 前缀,例如(@winyh/wui)
2.verson 版本号,每次发布版本前需要递增修改版本号
3.description 包简介。
4.private 是否私有。一定要设置为 false
5.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 发布最新版本。(发布成功后一般注册邮箱会收到发布版本的消息)
1.报错:
(1)Tapable.plugin is deprecated. Use new API on `.hooks` instead
原因:
extract-text-webpack-plugin目前版本不支持webpack4
解决办法:
npm install extract-text-webpack-plugin@next 2.报错:

  Can't resolve 'style-loader

   npm i style-loader --save-dev

 

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

  1. react_app 项目开发 (4)_ React UI 组件库 ant-design 的基本使用

    最流行的开源 React UI 组件库 material-ui 国外流行(安卓手机的界面效果)文档 ant-design 国内流行 (蚂蚁金服 设计,一套 PC.一套移动端的____下拉菜单.分页.. ...

  2. React UI 组件库uiw v1.2.8 发布

    uiw 高品质的UI工具包,基于React 16+的组件库.

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

    自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合 ...

  4. 如何从0开发一个Vue组件库并发布到npm

    1.新建文件夹在终端打开执行 npm init -y 生成package.json如下,注意如果要发布到npm,name不能有下划线,大写字母等 { "name": "v ...

  5. react UI组件库 Salt UI

    https://salt-ui.github.io/?spm=a219a.7629140.0.0.JWztQO

  6. Vue搭建组件库并发布到 npm

    https://www.jianshu.com/p/72d303449abc

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

    本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新 ...

  8. Docz 用 MDX 写 React UI 组件文档

    Docz 用 MDX 写 React UI 组件文档 前言 为了提升开发效率,创建一套 UI 组件库是一种较为有效的方式之一:可以减少重复工作.提高可复用,所以现在越来越多团队开始创建自己的 UI 组 ...

  9. 前端如何搭建vue UI组件库/封装插件(从零到有)

    需求 因之前是做外包项目居多,经常用到相同的组件,之前的办法是在一个项目中写一个组件,其他项目直接将compents下的组件复制,粘贴到项目中使用,缺点是维护起来,改一个项目,其他项目也需要修改,所以 ...

随机推荐

  1. dedecms搜索下拉

    今天公司用dedecms做一个音乐站,要用到下拉标题搜索,我在本地做的一个测试结果 以下是代码部分(ps:二级栏目不用的可以删除代码,如果只调用某一个栏目或者2个栏目可以用typeid='1,2'):

  2. 项目架构&架构部署&网站分析&网站优化

    一.架构演变 一个项目至少由三层内容组成:web访问层.数据库层.存储层 初级阶段 单体阶段 常见场景:项目初期 部署特点:所有应用服务都在一台主机 应用特点:开发简单 应用/数据分离阶段 常见场景: ...

  3. Tensorflow细节-P174-真正的图像预处理

    注意这里的读取image_raw_data = tf.gfile.FastGFile("./datasets/cat.jpg", "rb").read(),写入 ...

  4. RookeyFrame 附件 上传附件

    上传附件可允许的格式: 位置:Rookey.Frame.Web\Config\upload.xml 节点:Attachment -> allowType

  5. leetcode解题报告(28):Remove Linked List Elements

    描述 Remove all elements from a linked list of integers that have value val. Example Given: 1 --> 2 ...

  6. 《挑战30天C++入门极限》C++面向对象编程入门:类(class)

        C++面向对象编程入门:类(class) 上两篇内容我们着重说了结构体相关知识的操作. 以后的内容我们将逐步完全以c++作为主体了,这也意味着我们的教程正式进入面向对象的编程了. 前面的教程我 ...

  7. 《挑战30天C++入门极限》在c/c++中利用数组名作为函数参数传递排序和用指针进行排序的例子。

        在c/c++中利用数组名作为函数参数传递排序和用指针进行排序的例子. 以下两个例子要非常注意,函数传递的不是数组中数组元素的真实值而是数组在内存中的实际地址. #include <std ...

  8. 64位内核开发第十讲,IRQL中断级别了解

    目录 中断级别IROL了解 一丶IRQL 1.了解什么是中断 2.IROL中断级别. 3.遵守IROL编程规范的方式 中断级别IROL了解 一丶IRQL 1.了解什么是中断 中断就是产生的一个电信号. ...

  9. Spark设置自定义的InputFormat读取HDFS文件

    本文通过MetaWeblog自动发布,原文及更新链接:https://extendswind.top/posts/technical/problem_spark_reading_hdfs_serial ...

  10. centos7下修改docker工作目录

    应用环境: docker安装时如果不指定家目录(也就是工作目录),一般默认工作目录是 /var/lib/docker ,很多时候需要修改到大容量磁盘上进行存储,这里记录一下修改默认路径为 /data/ ...