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. stm32中使用cubemx配置freertos的信号量大小

    在配置freertos的情况下,cubemx会自动计算每个任务.信号,队列和软件定时器的使用堆栈大小,因此要合理规划 信号量默认是88byte 任务根据设定来计算,我默认配置是128,则最终是624b ...

  2. jdango 2.x的url配置的改变

    新版本的url.py文件中,不在使用1.x的正则表达式,强制使用在程序启动的时候会提示: WARNINGS: ?: (2_0.W001) Your URL pattern '^*article/' h ...

  3. 关于bootstrap的双层遮罩问题

    在使用bootstrap的双层遮罩时 遇到这么2个问题 第一个是当关闭遮罩里面层遮罩时滚动条会向左溢出 第二个也是当关闭遮罩里面层遮罩时 在第一层遮罩的内容相当于固定住了 拖动滚动条也只能显示他固定住 ...

  4. eclipse 创建c/c++ 工程

    新建 注意选择如下选项,c和c++ 都一样的 然后,编译运行 参考: https://blog.csdn.net/u013610133/article/details/72857870 https:/ ...

  5. [loj 6496]「雅礼集训 2018 Day1」仙人掌

    传送门 Description 给出一张 \(n\)个点 \(m\)条边的无向连通图,其中每条边至多属于一个简单环,保证没有自环,可能有重边.你需要为其中每条边定向,其中第 \(i\)个点的出度不能超 ...

  6. OpenFOAM设置监测点(探针)

    首先准备好我们自己的平常算例文件,本次我们以圆柱绕流的算例来说明用法 然后我们在/opt/openfoam4/etc/caseDicts/postProcessing/probes文件夹下找到prob ...

  7. 2、vueJs基础知识02

    vue生命周期: 钩子函数: created -> 实例已经创建 √ beforeCompile -> 编译之前 compiled -> 编译之后 ready -> 插入到文档 ...

  8. Prometheus初体验(三)

    一.安装部署 Prometheus基于Golang编写,编译后的软件包,不依赖于任何的第三方依赖.用户只需要下载对应平台的二进制包,解压并且添加基本的配置即可正常启动Prometheus Server ...

  9. Hadoop(一)—— 启动与基本使用

    一.安装&启动 安装 下载hadoop2.7.2 https://archive.apache.org/dist/hadoop/common/hadoop-2.7.2/ 2.7.2-官方文档 ...

  10. Spring boot Security 登陆安全配置

    实现的效果 访问url时,如果未登录时跳转到Login界面,要求用户登陆,如果登陆过返回请求的数据. 效果图 访问数据时,未登录返回login界面 登陆操作 登陆成功进入登出界面 登陆成功后再次访问数 ...