- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
本篇文章将介绍如何使用 vite 打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件 (*.d.ts) 。
vite 专门提供了库模式的打包方式,配置其实非常简单,首先全局安装 vite 以及@vitejs/plugin-vue 。
pnpm add vite @vitejs/plugin-vue -D -w
在 components 文件下新建 vite.config.ts 配置文件 。
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
build: {
//打包后文件目录
outDir: "es",
//压缩
minify: false,
rollupOptions: {
//忽略打包vue文件
external: ["vue"],
//input: ["index.ts"],
output: {
globals: {
vue: "Vue",
},
dir: "dist",
},
},
lib: {
entry: "./index.ts",
name: "easyest",
fileName: "easyest",
formats: ["es", "umd", "cjs"],
},
},
plugins: [vue()],
});
然后在 components/package.json 添加打包命令 scripts 。
"scripts": {
"build": "vite build"
},
执行 pnpm run build 。
同时生成了打包后的 dist 文件 。
但是这种打包方式最终会将整个组件库打包到一个文件中,并且样式文件也不能按需加载,所以我们需要修改一下配置让打包后的结构和我们开发的结构一致,如下配置我们将打包后的文件放入 easyest 目录下,因为后续发布组件库的名字就是 easyest,当然这个命名大家可以随意 。
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
build: {
//打包文件目录
outDir: "es",
//压缩
//minify: false,
rollupOptions: {
//忽略打包vue文件
external: ["vue"],
input: ["index.ts"],
output: [
{
//打包格式
format: "es",
//打包后文件名
entryFileNames: "[name].mjs",
//让打包目录和我们目录对应
preserveModules: true,
exports: "named",
//配置打包根目录
dir: "../easyest/es",
},
{
//打包格式
format: "cjs",
//打包后文件名
entryFileNames: "[name].js",
//让打包目录和我们目录对应
preserveModules: true,
exports: "named",
//配置打包根目录
dir: "../easyest/lib",
},
],
},
lib: {
entry: "./index.ts",
},
},
plugins: [vue()],
});
执行 pnpm run build ,此时生成打包后的文件目录如下 。
但是此时的所有样式文件还是会统一打包到 style.css 中,还是不能进行样式的按需加载,所以接下来我们将让 vite 不打包样式文件,样式文件后续单独进行打包.
到这里其实打包的组件库只能给 js 项目使用,在 ts 项目下运行会出现一些错误,而且使用的时候还会失去代码提示功能,这样的话我们就失去了用 ts 开发组件库的意义了。所以我们需要在打包的库里加入声明文件(.d.ts).
安装 vite-plugin-dts ,注意版本最好一致 。
pnpm add vite-plugin-dts@1.4.1 -D -w
在 vite.config.ts 引入,注意这里同时添加了组件命名插件 DefineOptions (上篇文章提到过,注意这个要写在dts后面,源码中可能有误) 。
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import dts from "vite-plugin-dts";
import DefineOptions from "unplugin-vue-define-options/vite";
export default defineConfig({
plugins: [
vue(),
dts({
entryRoot: "./src",
outputDir: ["../easyest/es/src", "../easyest/lib/src"],
//指定使用的tsconfig.json为我们整个项目根目录下,如果不配置,你也可以在components下新建tsconfig.json
tsConfigFilePath: "../../tsconfig.json",
}),
DefineOptions(),
],
});
再次打包就会发现打包后文件中出现了我们需要的声明文件 。
其实现在大部分前端构建脚手架都支持 esmodule 了,而 esmodule 本身就支持按需加载,所以说组件库打包后的 es 格式它本身自带 treeShaking,而不需要额外配置按需引入。后面我们要做的则是让样式文件也支持按需引入,敬请期待.
本篇文章代码地址 如何使用Vite打包组件库 ,hxd们star一下 。
最后此篇关于从0搭建Vue3组件库(五):如何使用Vite打包组件库的文章就讲到这里了,如果你想了解更多关于从0搭建Vue3组件库(五):如何使用Vite打包组件库的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我将 Vite ( https://vitejs.dev/ ) 用于静态多页网站。 这是构建命令后的默认项目文件夹结构。 my-app/ ├─ node_modules/ ├─ dist/ │ ├─
Formatjs 提供了一个 babel plugin对于使用 react-intl 注入(inject)消息 ID 并删除 description 的模块。我如何将它与 Vite 一起使用? 最佳答
我正在尝试编写一个 chrome 扩展程序。我找到了一种方法来创建多个页面和后台脚本,但后台脚本包含哈希并且是放入 dist/assets 文件夹中。我只想输出“dist/background.js”
我使用 vite 创建了一个项目模板。 在package.json下,我看到了这个; "scripts": { "dev": "vite", "build": "vue-tsc -
我正在尝试从 Create React App 迁移到 Vite.js,但我遇到了导入别名的问题。 在 Create React App 中,我有一个 jsconfig.json 文件,其中 comp
在我的 Vite 项目中使用以下 .env: # To prevent accidentally leaking env variables to the client, only # variabl
如果您尝试使用 Vite 将 dayjs 导入到 Vue/React 应用程序中,您会发现它失败。 Vite 仅适用于 ESM 模块。 最佳答案 我发现你需要直接导入esm模块,然后它才能在Vite
我最近试图在Vercel上部署一个SvelteKit项目库,但由于Vercel构建应用程序的方式,我编写的传递实用程序类并以编程方式调用TailWind的API端点无法工作。它在我的本地环境中运行得很
我最近试图在Vercel上部署一个SvelteKit项目库,但由于Vercel构建应用程序的方式,我编写的传递实用程序类并以编程方式调用TailWind的API端点无法工作。它在我的本地环境中运行得很
我正在使用 Vue 和 vite 通过获取 API 来练习 Web 应用程序的工作流程,遵循此 tutorial .末yarn dev命令,我收到错误。我试过了: 直接克隆project并运行相同的命
我有一个用 React JS 构建的网站,我使用 Vite 作为 JS Bundler。问题是,当我在 Netlify 上部署网站并重新加载页面时,它显示“找不到页面”。 我尝试添加更改 vite.c
我是 vite 新手,首先,我实际上并不知道我需要什么样的结构。 我需要构建多个应用,但其中一些依赖于相同的组件。 到目前为止它运行良好,但我认为混合了一些东西
我正在使用 Vue + Vite + TS,并且正在构建一些我想在其他地方构建和导入的库。 关键是我使用 dotenv 设置了一些环境变量,因此我可以使用 import.meta.env.MY_VAR
我正在参加「掘金·启航计划」 项目背景 vite出现之后,迅速带走了一大波webpack的使用者,即使是对打包工具不熟悉的小白,也能很快感受到两者的区别——vite快的多!
分析 version:2.3.7。本文将整理 vite 静态资源的几种处理方式,应用案例和源码分析相结合,带你 10mins 通关该模块知识~ 一.处理的五种方式 (1)
博客园 @四季留歌 项目工程下载(腾讯微云):点我 缺点:必须安装 cesium 依赖和几个 vite 插件,起项目时略微麻烦,部署 cdn 较麻烦 优点:打包速度起飞,构建后的成果代码网络传输效率最
我有一个 vite 3 项目。我怎样才能将它更新到 vite 4?我需要从头开始创建一个新项目并复制文件吗?或者我只是更新 package.json 中的版本号,删除 node_modules 文件夹
我想通过 vite 获取 npm 模块中的原始 css 字符串。根据 vite 手册, https://vitejs.dev/guide/assets.html#importing-asset-as-
我正在尝试让 https 在我的 Vite 本地主机环境中工作。 Chrome 显示无效证书错误。 我已经像这样设置了我的 vite.config.js 文件: import { defineConf
您好,我已经安装了新的应用程序 vue3 typescript + vite,我在构建图像并旋转容器后遇到了问题。我无法访问 localhost:3000,浏览器只会显示 The connection
我是一名优秀的程序员,十分优秀!