lib: {//组件库源码的入口文件entry: resolve('packages/index.ts'),//组件库名称name:'MyPackages',//文件名称, 打包结果举例: my-packages.umd.cjsfileName:'my-packages', }, rollupOptions: {//确保外部化处理那些你不想打包进库的依赖external: ['react','react-dom'], output: {//在 UMD 构建模...
"peerDependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" } // react 版本根据实际需求做调整 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 这样就不会把 react 打包到组件库里面 然后我们还...
首先组件库需要一个响亮的 title -> Boty-Design “BOTY 的全称是 battle of the year(国际顶级街舞团队大赛),总之 cool 就行了 ” Vite 最近Vite2 出来了,也支持 react 开发,我们选择 Vite 来作为组件库的开发工具 如上图所示,Vite 开发环境的构建速度比常规的 Webpack 要快很多,这也是为什么我们使用 Vite ...
打开vite.config.js,默认配置如下: import{defineConfig}from'vite'importreactRefreshfrom'@vitejs/plugin-react-refresh'// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[reactRefresh()]}) 那么我们按照库模式修改配置,打包文件输出到lib/dist目录下 import{defineConfig}from'vite'importreactRefr...
现在的时间点Vue或者React都可以用Vite来进行开发打包,这里有老前辈Vant的尝试我们可以放心使用~。 ️生成模板 yarn create vite my-components --template react-ts 这里我们创建生成一套react-ts的应用模板,可以仅保留main.tsx用于组件库的开发调试。
vite 打包 react 组件库的问题? 我最近在学习用 vite 打包一个组件库, 然后发布在 npm 上引入, 但是我打包以后发现并没有任何以组件名字命名的模块导出. 这是我的打包配置: import path from 'path'; const buildConfig = { build: { rollupOptions: { ...
3.Yep-React组件库的引入 这里我们先试着样式全部引入,打包看一次: import'@jdcfe/yep-react/dist/@jdcfe/yep-react.css'; 目前的m.css静态资源的大小为166.85kb,那么下面我们进行一次瘦身,使用按需加载的方法,那么这里我们需要一个插件 npmivite-plugin-imp -D ...
TypeScript Interface,用于解析 .tsx 文件中对于 export 组件的 props 类型定义。 Vite Comp Runtime,用于运行组件开发态,编译最终组件文档。 结合Vite,已经实现了 Vite 模式下的 React、Rax 组件开发,它相比于之前使用 Webpack 做的组件开发,已经体现出了以下几个大优势: 无惧大型组件库,即使有 2000 个组件在同...
默认情况下Vite的配置会打包umd和esm两种模式,只需要写一下名字即可。 同时在打包时我们也不希望外部的库打包进去,像必然存在的react,vue,二次封装的组件库antd,vant这些都需要剔除出去。 现在直接build可以看到生成了es和umd两份不同版本的文件,里面仅存在我们的代码: ...