Vite引入虚拟文件的实现

目录
  • 背景
  • 引入虚拟文件
  • 例子
  • 文档
  • Typescript支持
  • 总结

背景

在新项目升级vue3以后,自然而然的就把vue-cli&webpack更换成了vite,不得不说vite真的很香,不仅编译速度刚刚的,而且在vue3的新功能上也有更好的支持.

不过在开发过程中也遇到了一些问题

在看到vite-plugin-pages插件之后,突然看到这样的写法:

import routes from "virtual:generated-pages";

其实在使用很多vite插件的时候,发现在引用中存在这样的用法:

import xxx from "virtual:xxx";

那么这个virtual:xxx怎么之前没有见过,这明显不是一个npm上面的包,那会是什么?

引入虚拟文件

在看了vite的文档之后才明白,原来这是一个引入虚拟文件功能,他可以生成一个虚拟的文件让你来引入.

在vite文档的插件API中引入一个虚拟文件处说到这个功能,章节里面有写到支持引入你一个虚拟文件,也就是这个文件并不存在,而是通过代码临时生成的.

而这个生成是通过vite的插件来完成,也就是说在nodejs环境中来生成对应的虚拟文件

vite-plugin-pages就是通过这个功能实现的,他首先在编译时遍历对应的页面目录,根据目录结构和文件名的命名规则来动态生成对应的路由表,这样就很好的完成了本地目录结构到动态路由之间的良好交互.

其实在nuxt中也有动态路由的功能,不过他可没有虚拟引入,在项目启动前来动态修改webpack配置,使用definePlugin来将路由表传递给前端代码的.

通过引入虚拟文件的功能,我们就避免了需要通过传递修改常量的方式,将对应的数据传递给前端代码.

而除了传递常量,虚拟引入可以做的更多,要知道他可是引入的是一个虚拟js文件,这表示我们也可以动态的生成函数以及代码逻辑在其中.

例子

举个例子,比如可以在生成的代码中自动导入需要的文件,然后返回一个函数,通过这个函数来使用之前导入的文件,这样我们就不需要在实际使用的导入这些文件了,通过返回虚拟文件中导出的函数我们就可以直接使用这些本来要导入的文件.

import a from 'a-module'
import b from 'b-module'
...
import z from 'z-module'

const modules = {a,b,...,z}

export default useModule(name){
    return modules[name]
}

之前使用 👇

import a from 'a-module'
import b from 'b-module'
...
import z from 'z-module

a()
b()
c()

现在使用 👇

import useModule from 'virtual:xxx'

const a = useModule('a')
const b = useModule('b')
const c = useModule('c')

当然这只是一个简单的例子，你可以更多的发挥自己的想象力还是先更多的功能

文档

我们来回到文档来看看具体功能是如何实现的呢？

文档中给出的例子如下：

export default function myPlugin() {
  const virtualFileId = '@my-virtual-file'  

  return {
    name: 'my-plugin', // 必须的，将会在 warning 和 error 中显示
    resolveId(id) {
      if (id === virtualFileId) {
        return virtualFileId
      }
    },
    load(id) {
      if (id === virtualFileId) {
        return `export const msg = "from virtual file"`
      }
    }
  }
}

可以看出其中主要又三个关键点:

  • virtualFileId : 需要引入的虚拟文件名
  • resolveId(id): 判断是否是需要解析的虚拟文件名
  • load(id): 返回对应的虚拟引入文件的代码字符串

可以看出返回的代码是以字符串的方式返回的,我们可以通过模板拼接或模板转译的方式来方便我们构建需要返回的代码字符串.

Typescript支持

不过需要注意的是虚拟文件引入返回的是js代码而不是ts代码,而且代码是动态生成的这也说明在使用过程中我们会遇到在TS中没有类型支持的情况

那么如果你的代码结构是确定的可以提前生成对应的d.ts定义文件.然后通过 在tsconfig中配置compilerOptions.types加载对应的定义文件即可,如果代码结构是动态的,那么就需要动态生成对应的d.ts文件写入到项目中来实现.

declare module 'virtual:xxx' {
...
}

总结

可以看出引入虚拟文件是一个很实用的功能,它不仅可以让前端代码可以与编译环境进行交互,而且可以动态的生成代码来实现一些以前不是那么方便实现的功能,而开发起来具体实现也很简单,你准备在你的插件中使用了么?

到此这篇关于Vite引入虚拟文件的实现的文章就介绍到这了,更多相关Vite引入虚拟文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3.0+vite2实现动态异步组件懒加载

    vue3.0+vite2实现动态异步组件懒加载

    创建一个vite项目 性能决定成败;vite确实快: cmd 命令行(默认你已经安装了node & npm),执行npm init @vitejs/app vue-study – --template vue: cd至vue-study,npm install(安装依赖); npm run dev(启动项目): 创建组件 新建一个目录为pages,pages下面再新建一个目录contents,contens下面可以新建具体的组件目录页面,此时目录结构为 App.vue <template&g

  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3 的项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具.在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译 node >= 10.16.0 搭建 使用 vite 搭建项目 npm init

  • 详解antd+react项目迁移vite的解决方案

    antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎不那么香了,为什么这么说呢,因为vite太快了.经过一段时间的尝试,决定在项目中把webpack替换成vite试试,遂写成本文分享给大家. Vite是什么 作为本文的主角,首先简单介绍一下vite这个构建工具,该工具是尤雨溪推出的[下一代前端开发和构建工具],vite其实也不是一个新的工具,早在一年

  • vite+vue3+element-plus项目搭建的方法步骤

    vite+vue3+element-plus项目搭建的方法步骤

    使用vite搭建vue3项目 通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目. $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev 引入Element Plus 安装Element Plus: npm install element-plus --save main.js中完整引入 Element Plus: import { createApp

  • 详解vite2.0配置学习(typescript版本)

    详解vite2.0配置学习(typescript版本)

    介绍 尤于溪的原话. vite与 Vue CLI 类似,vite 也是一个提供基本项目脚手架和开发服务器的构建工具. vite基于浏览器原生ES imports的开发服务器.跳过打包这个概念,服务端按需编译返回. vite速度比webpack快10+倍,支持热跟新, 但是出于处于测试阶段. 配置文件也支持热跟新!!! 创建 执行npm init @vitejs/app ,我这里选择的是vue-ts 版本 "vite": "^2.0.0-beta.48" alias别

  • 使用Vite2+Vue3渲染Markdown文档的方法实践

    目录 自定义 Vite 插件 使用 vite-plugin-markdown Import Front Matter attributes Import compiled HTML (Mode.HTML) Import ToC metadata (Mode.TOC) Import as a React component (Mode.REACT) Import as a Vue component (Mode.VUE) 写在最后 大部分使用 Vite2 的开发者遇到的一个问题,就是文档里并没有相

  • vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite 出了 2.x 版本,抱着学一学的心态决定出个简单的项目,结合 element-plus,以及将会成为每位前端必会的 typescript,实现了如下内容. vite是一个由原生 ESM 驱动的 Web 开发构建工具.在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包. vite 作用 快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变. 使用的

  • Vite和Vue CLI的优劣

    Vue 生态系统中有一个名为 Vite 的新构建工具,它的开发服务器比 Vue CLI 快 10-100 倍. 这是否意味着 Vue CLI 已经过时了?在本文中,我将比较这两种构建工具,并说明它们的优缺点,以便你可以决定哪一种适合你的下一个项目. Vue CLI 概述 大多数 Vue 开发人员都知道,Vue CLI 是使用标准构建工具和最佳实践配置快速建立基于 Vue 的项目的不可或缺的工具. 其主要功能包括: 工程脚手架 带热模块重载的开发服务器 插件系统 用户界面 在本讨论中需要注意的是,

  • vite2.0+vue3移动端项目实战详解

    一.涉及技术点 vite版本 vue3 ts 集成路由 集成vuex 集成axios 配置Vant3 移动端适配 请求代理 二.步骤 vite+ts+vue3只需要一行命令 npm init @vitejs/app my-vue-app --template vue-ts 配置路由 npm install vue-router@4 --save 在src下新建router目录,新建index.ts文件 import { createRouter, createWebHashHistory, Ro

  • Vite引入虚拟文件的实现

    目录 背景 引入虚拟文件 例子 文档 Typescript支持 总结 背景 在新项目升级vue3以后,自然而然的就把vue-cli&webpack更换成了vite,不得不说vite真的很香,不仅编译速度刚刚的,而且在vue3的新功能上也有更好的支持. 不过在开发过程中也遇到了一些问题 在看到vite-plugin-pages插件之后,突然看到这样的写法: import routes from "virtual:generated-pages"; 其实在使用很多vite插件的时候

  • 关于vite.config.ts文件的配置方式

    目录 vite.config.ts文件的配置 1.alias配置别名 2.关于path的引入 vite项目在jenkins自动打包报错 2种解决方案 vite.config.ts文件的配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // https://vitejs.dev/config/ export default defineConfig(

  • vue3+vite引入插件unplugin-auto-import的方法

    vue3+vite引入插件unplugin-auto-import的方法

    自动引入 composition api,不需要再手动引入.github地址:https://github.com/antfu/unplugin-auto-import 下载 npm i unplugin-auto-import -D 修改vite.config.ts文件 import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [vue(),AutoImport({ imp

  • 同步异步动态引入js文件的几种方法总结

    动态加载js文件 有时候我们需要根据参数不同来引入不同的js文件,用html直接写标签满足不了我们的需求,总结几种方法,以及同步异步加载的各种需求 一.直接加载 <div id="divId"></div> <script> 二.异步加载,并发执行,但引入js内容不能直接使用 //1.1 直接document.write document.write("<script src='test.js'><\/script>

  • Android Studio 引入 aidl 文件的方法汇总

    Android Studio 引入 aidl 文件的方法汇总

    AndroidStudio 引入 aidl 文件,一般来说,有两种方法. 第一种方法 直接在 src/main 目录下新建 aidl 文件夹,并将我们的 aidl 文件放到该目录下.因为 AndroidStudio 默认的 aidl 文件默认配置是这样的. 第二种方法 把 adil 文件拷贝到libs文件夹下在build.gradle文件中配置 sourceSets { main { jniLibs.srcDirs = ['libs'] aidl.srcDirs = ['src/main/jav

  • Vue中引入样式文件的方法

    一.在vue中使用scss 首先进行安装如下依赖: cnpm i sass-loader node-sass -D 二.vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis&

  • Vue项目中引入外部文件的方法（css、js、less）

    Vue项目中引入外部文件的方法（css、js、less）

    这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font

  • 详解webpack和webpack-simple中如何引入css文件

    详解webpack和webpack-simple中如何引入css文件

    博主最近研究vue+webpack的时候想引入css文件死活引入不出来,在webpack-simple那里却能引得出来,十分的纳闷,然后细心的调试了一下,原来这webpack和webpack-simple两个东西引入css文件有点区别. 首先说一下如何在webpack中引入css文件吧.博主的webpack是最新版本,不知1.0版本的是如何,所以下面说的是2.0以后的版本.首先在命令行中新建一个vue项目,如何新建请看我之前发的一篇博文,因为在webpack中,本身就有一个css-loader,

  • 引入JS文件IE6报语法错误或缺少对象问题的解决方法

    解决"引入JS文件IE6报错"的问题 问题描述: 页面引入一个js文件,其中定义了函数或对象,然后在页面中调用函数或对象时,在IE6会报"语法错误"或"缺少对象".在IE6+或者IE7却运行正常. 问题分析: 这个对象在引入的JS文件中是存在的,因为在IE6+以上的浏览器都可以正常运行.这个问题在于文件编码上,如果JS文件编码与当前页面的编码不一致,就可能导致在IE6中页面不能正常获取和解析JS文件中的内容,在IE6中,默认引入的文件和页面的编码

  • vue在index.html中引入静态文件不生效问题及解决方法

    本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html) 出现的原因及解决办法 第一种可能出现原因就是引入的静态文件在src文件夹内,这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static,这种的解决办法更改配置文件,把对应的几个配置文件内的stat

随机推荐