lib: {//组件库源码的入口文件entry: resolve('packages/index.ts'),//组件库名称name:'MyPackages',//文件名称, 打包结果举例: my-packages.umd.cjsfileName:'my-packages', }, rollupOptions: {//确保外部化处理那些你不想打包进库的依赖external: ['react','react-dom'], output: {//在 UMD 构建模...
1.创建react项目 npm create vite@latest vite-react-packages-to-npm 2.yarn add vite-plugin-libcss (为了在打包后主动加上css样式) 3.创建一个要封装的组件 packages 里面创建一个需要封装的组件内容,例如packages / Button/ Button.tsx import"./index.scss";importReact,{PropsWithChildren}from"react";exp...
去年发表的《一个好的组件应该是什么样的?》 一文介绍了借助 TypeScript AST 语法树解析,对 React 组件 Props 类型定义及注释提取,自动生成组件对应 截图、用法、参数说明、README、Demo 等。在社区中取得了比较好的反响,同时应用在团队中也取得了较为不错的结果,现在内部组件系统中已经累计使用该方案沉淀 1000+ ...
那么我们需要写个button组件 importReactfrom'react'functionButton({children}){return({children})}exportdefaultButton 接下来就可以打包组件了, yarn yarn build 结果如下图: 打包后生成了两个文件 因为vite默认是生成es和umd两种类型的,如果只需要一种,可以修改配置文件中build.lib.formats选项。 文件打包好,我们...
在 Vite 的思路中，完全可以在使用到组件元数据时，再获取其元数据信息，比如加载一个 React 组件为：import ReactComponent from'./component1.tsx'那么加载其元数据即：import ComponentTypeInfo from'./component1.tsx.type.json'; // or const ComponentTypeInfoPromise = import('./component1.tsx.type.json...
这样就不会把 react 打包到组件库里面 然后我们还可以引入 ESLint、Husky 等工具来统一规范 除此之外,我认为有必要创建两个目录: 一个演示页面目录 example,用于在开发过程中查看效果 一个管理源码的目录 packages,用于打包发布 二、组件开发 初始化的项目中有一个src目录,可以先重命名为example,用作开发过程中的...
此时的项目已经默认集成了 @vitejs/plugin-react 这个插件。 到这一步其实就已经基本结束了,自动集成 HMR,jsx,ts,css module,资源打包等一系列功能。 相比于 webpack,简直不要太友好。 eslint 先安装eslint: yarnaddeslint -D 然后初始化eslint配置: ...
现在的时间点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: { ...