插件体系:丰富的社区插件库 加载器(Loaders):转换源代码(Babel, TypeScript等) 性能优化:代码分割、懒加载、缓存策略 2. Vite Vite 是由 Vue.js 的作者尤雨溪推出的一个新型构建工具,旨在提供更快的开发体验。它利用了ES模块的原生支持来实现即时启动和快速热更新。与传统基于打包的开发服务器不同,Vite 在
这里我们的入口不是上面的main.tsx,组件库的打包入口需要是一个包含了所有组件的索引文件,大概可以长这样: importButtonfrom"./button/index";export{Button}; 默认情况下Vite的配置会打包umd和esm两种模式,只需要写一下名字即可。 同时在打包时我们也不希望外部的库打包进去,像必然存在的react,vue,二次封装的组件...
build: {//打包输出的目录outDir:'lib',//防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制cssTarget:'chrome61', lib: {//组件库源码的入口文件entry: resolve('packages/index.ts'),//组件库名称name:'MyPackages',//文件名称, 打包结果举例: my-packages.umd.cjsfileName:'my-packages', }, rollup...
我尝试使用 vite 的 lib 模式打包一个 react 组件,vite 配置如下: import { defineConfig } from "vite"; export default defineConfig({ mode: "production", plugins: [ react() ], build: { outDir: "dist", lib: { entry: "./src/UI.tsx", name: "AppText", formats: ['es'], fileName: ...
如果一切正常,你应该能够在浏览器中看到使用了你打包的React组件的应用。 这样,你就成功地使用Vite打包了一个React项目成一个JS库,并在其他项目中进行了验证。
vite 打包 react 组件库的问题?我最近在学习用 vite 打包一个组件库, 然后发布在 npm 上引入, 但是我打包以后发现并没有任何以组件名字命名的模块导出. 这是我的打包配置: import path from 'path'; const buildConfig = {build: {rollupOptions: {external: ['react'],output: {entryFileNames: 'index.js...
在每次打包之前应该删除上次上次打包生成的dist文件夹,可以配置rimraf自动在每次打包前清空dist文件夹。 修改package.json命令: { "scripts": { "dev": "vite", "build": "pnpm run clean && rollup -c", "clean": "rimraf ./dist" } } typescript类型声名文件 当在typescript环境下引入组件时会报错...
最近阅读了下 vite 的文档,发现它有个库模式用来打包挺方便的,因而写篇博客记录下折腾过程。 基本配置 执行如下命令创建一个 React + TypeScript 的项目 BASH pnpm create vite 删除src 和 public 文件夹,创建 example 和 packages 文件夹,其中 example 存放组件示例或者调试组件,packages 存放组件源码。另外别忘了...
最后,亲来参观下我的组件库吧https://grinzero.github.io/magic-design-react/swiper/corner-swiper (也可以给组件库点个star哦https://github.com/GrinZero/magic-design-react) 额外附带一份vite的rollup我的最佳实践 # vite的rollup打包 这里是rollupOptions部分,用于打包出组件库 后边这里则生成.d.ts,提供类...