npm run build 打包 之后怎么用_基于createreactapp打包编译自己的第三方UI组件库
实现效果
首先我们看一下实现效果,比如我们本地开发了一个Tag组件:蓝色的按钮就是我们的tag组件,接下来我们把它发布到npm上,效果如下:此时我们就可以用npm install的方式安装我们的组件并使用了。
实现
首先我是基于create-react-app来打包我们的UI库的,因为比较方便简单,当然我们也可以使用自己搭建的webpack来实现这一过程。
1.通过create-react-app快速启动一个项目:
npx create-react-app alex_xu
cd alex_xu
npm start
2.设计组件库目录结构我们在create-react-app创建的项目下的src目录下新建components用来存放我们的组件,用app.js要导入我们的组件来测试效果,我们会把打包后的组件目录放在lib下,目录大致如下:
3.配置package.json文件
package.json主要用来设置组件库的信息及打包脚本,就好比我们用vue/react脚手架搭建项目一样,大家应该都很熟悉了:
{
"name": "@alex_xu/ui",
"version": "0.0.1",
"description": "A Design UI library for React",
"main": "lib/index.js",
"module": "es/index.js",
"author": "alex_xu",
"private": false,
"license": "MIT",
"publishConfig": {
"registry": "你的npm仓库地址"
},
"repository": {
"type": "git",
"url": "git+你的git仓库地址"
},
"bugs": {
"url": "issues地址"
},
"files": [
"es",
"lib"
],
"homepage": "组件库的主页",
"keywords": [
"react",
"components",
"ui",
"framework",
"frontend"
],
"peerDependencies": {
"react": ">=16.5.0",
"react-dom": ">=16.5.0"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/cli": "^7.6.4",
"@babel/core": "^7.6.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.6.3",
"@babel/preset-react": "^7.6.3",
"babel-plugin-import": "^1.12.2"
},
// ...
}
这里的script配置只是运行时配置,打包的时候我们会写单独的配置脚本去执行打包,然后打包jsx语法我们需要手动配置babel,所以我们会安装babel插件,babel配置如下:
const presets = [
[
"@babel/preset-env", // 将ES6语法转换为es5
{
"useBuiltIns": "usage", // 只编译需要编译的代码
"corejs": "3.0.1",
}
],
"@babel/preset-react"
];
const plugins = [
"@babel/plugin-syntax-dynamic-import",
["import", { "libraryName": "antd", "style": true }]
]
module.exports = { presets, plugins }
接下来安装babel模块:
npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react -D
这里为了设置兼容多平台的环境变量,我们还需要用到cross-env, 拷贝css需要cpx,
npm i cross-env cpx -D
需要安装的插件已经完成,现在可以写打包组件的shell脚本了(建议在在根目录下创建):
cross-env BABEL_OUTPUT=commonjs babel src/components --out-dir lib/
babel src/components --out-dir es/
# 拷贝css
cpx \"src/components/**/*.css\" es"
cpx \"src/components/**/*.css\" lib"
接下来我们继续我们的组件库发布。
4.发布组件库
首先假定我们在components下写好了第一个组件Tag,我们在components的index.js统一导出:
export { default as Tag } from './Tag';
// ...
然后执行我们的shell脚本:
bash build.sh
执行完可以发现在根目录下多了lib和es的目录,里面即使我们打包后的组件,一种遵循es规范,一种遵循cjs规范。
发布
npm publish --access public
--access是设置npm的访问级别,有public|restricted, restricted是限制访问,如果要发开源包,一般设置为public。往期回顾:1、css大法之使用伪元素—实现超实用的图标库2、前端工程师凭什么这么值钱?3、使用纯css实现网站换肤和焦点图切换动画
npm run build 打包 之后怎么用_基于createreactapp打包编译自己的第三方UI组件库相关推荐
- mpvue使用vant Weapp运行npm run build命令打包后失效
最近在使用mpvue开发微信小程序,在开发过程中使用有赞的小程序ui框架-- vant Weapp ,至于如何使用在我个人博客中有一篇关于如何使用vant Weapp ,需要的同学请点进这里自行查看. ...
- 执行npm run build的时候报错怎么办?
执行npm run build的时候报错怎么办? [webpack-cli] Invalid configuration object. Webpack has been initialized us ...
- vue打包不生成dist文件夹(IDEA使用命令行npm run build命令打包)
记录一下自己的愚蠢问题!!! 问题出现情况:我是使用IDEA打开的vue项目,并在IDEA的命令行(terminal)中执行vue打包命令(npm run build)的,打包结果会显示成功,但是没有 ...
- npm run build打包失败
使用npm run build命令打包Angular项目时报错,错误信息如下: WARNING in budgets, maximum exceeded for initial. Budget 2 M ...
- vue2.0项目部署到服务器_vue项目运行npm run build打包后如何发布到服务器?
运行npm run build后,怎么发布到服务器? 这样就打包成功了.然后我的项目根目录就会多一个dist文件夹,里面包含static文件夹(存放img.css.js等文件)和index.html. ...
- vue项目打包:npm run build 进程卡死
vue项目打包:npm run build 进程卡死?! 解决方法 找到以下build文件夹下的版本检测js文件,并注释监测npm代码即可. 文件的路径和处理办法如下:(注释掉第19~25行的代码即可 ...
- VSCode内npm run build编译打包时候报错:code ELIFECYCLE - (已解决)
文章目录 win10系统使用VSCode打包项目进行build编译的时候,报错:Module build failed: Error: "extract-text-webpack-plugi ...
- vue中Npm run build 根据环境传递参数方法来打包不同域名
项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, ...
- vue-cli脚手架npm run build打包后图片路径问题 2018.11.21
2018/11/21 最近在自己尝试做一个vue的项目,发现了一个打包以后出现的路径问题 使用npm run dev 可以正常打开项目,图片路径不会出错,使用脚手架npm run build 打包以后 ...
最新文章
- RESTful之认证Authentication
- 【计算机网络】应用层 : 总结 ( 网络应用模型 C/S P2P | 域名解析 DNS | 文件传输协议 FTP | 电子邮件 | 万维网 与 HTTP ) ★★★
- Java程序员面试宝典--this
- 深度案例 | 神策数据如何助力房产企业数字化转型快速落地?
- ImportError: cannot import name cbook
- 去除tab、空格、回车符等使用replace语句
- SQL2000自动备份
- 真实经历:整整一年了,他是这样从程序员转型做产品经理的
- 1.2-Nginx编译安装
- Exynos4412 中断驱动开发(一)—— 中断基础及中断的注册过程
- [css] 在rem下如何实现1像素?
- 前端神器-网站图片抓取精灵V1.0正式发布
- 用戶故事 vs 用例
- 数据库mysql5.7 sqlyog的安装
- 关于穿越机FPV视频果冻效应的讨论
- ai画面怎么调大小_AI页面面板中如何调尺寸
- CEC2018:动态多目标测试函数DF10~DF14的PS及PF(提供Matlab代码)
- 酷炫网页按钮,炫酷变色效果(附源码)
- 合同管理模块样板html,可配置合同模板的合同管理系统的制作方法
- QCC512x QCC302x 延时函数 (阻塞与非阻塞)
热门文章
- 【scala】 scala 条件控制 和异常处理(二)
- QT解决方案中新建动态链接库工程,且继承于QObject,解决无法生成moc_XXX.cpp文件的问题,解决工程之间的引用问题
- Jenkins遇到问题一:jenkins配置权限不对导致无法登陆或者空白页面解决办法
- 解决minikube启动时若干问题
- python写入csv文件中文乱码解决方案
- fastJson反序列化异常,JSONException: expect ‘:‘ at 0, actual =
- 我如何进入Docker容器的shell?
- 从C#中的枚举获取int值
- 机器人操作系统来到Windows
- 使用yum安装gitlab