怎么用Vue3+Vite批量導(dǎo)入模塊或資源

今天小編給大家分享一下怎么用Vue3+Vite批量導(dǎo)入模塊或資源的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

1，前置基礎(chǔ)知識 - JavaScript模塊化編程

在以往開發(fā)普通網(wǎng)頁程序時，我們直接使用script標(biāo)簽引入了js文件即可調(diào)用其函數(shù)，但是在vue中你發(fā)現(xiàn)就不行了，因為vue也是使用了模塊化編程標(biāo)準(zhǔn)。

通常我們可以把一個封裝了很多要復(fù)用的函數(shù)和變量的js文件稱作模塊，模塊必須暴露（導(dǎo)出）其中的變量、函數(shù)才能被外部導(dǎo)入并調(diào)用其中的函數(shù)。

現(xiàn)在常見的模塊標(biāo)準(zhǔn)有兩個：CommonJS和ES6。

在這里我們著重講解ES6模塊。

(1) export語句 - 暴露函數(shù)和變量使外部調(diào)用

現(xiàn)在我們自己創(chuàng)建一個js文件表示我們自己的模塊，里面封裝一些常常復(fù)用的函數(shù)、變量等等，就需要使用export暴露出來。

// 導(dǎo)出常量a
export const a = 'test';

// 導(dǎo)出函數(shù)myPrint
export function myPrint(msg) {
	console.log('[]' + msg);
}

可見在定義變量/函數(shù)時在前面加上export即可。

除此之外，還可以批量導(dǎo)出：

const a = 'test';

function myPrint(msg) {
	console.log('[]' + msg);
}

// 導(dǎo)出常量a和函數(shù)myPrint
export {
	a,
	myPrint
};

(2) import語句 - 導(dǎo)入變量/函數(shù)并使用

上面封裝好了函數(shù)、變量等等并導(dǎo)出了，但是還是不能直接使用的。需要在要使用的地方進(jìn)行導(dǎo)入操作：

// 導(dǎo)入函數(shù)myPrint和常量a
import {
	a,
	myPrint
} from './mymodule.js';

// 使用導(dǎo)入的變量和函數(shù)
console.log(a);
myPrint('msg');

這樣就可以使用了。

可見import語法如下：

import { 變量1/函數(shù)1, 變量2/函數(shù)2, 變量3/函數(shù)3, ... } from 'js文件路徑';

需要注意，導(dǎo)入的變量和函數(shù)一次可以有多個，用大括號括起來，并且導(dǎo)入的變量/函數(shù)名必須和模塊中導(dǎo)出的變量/函數(shù)名一致！

(3) import * as xxx語句 - 全部導(dǎo)入

對于需要導(dǎo)入很多的模塊，我們import后面需要寫一長串的導(dǎo)入的變量和函數(shù)，因此我們還可以一次性全部導(dǎo)入。

對于上面的mymodule里面導(dǎo)出了一個變量和一個函數(shù)，在此我們可以一次性全部導(dǎo)入：

// 一次性全部導(dǎo)入該模塊的內(nèi)容并命名為my
import * as my from './mymodules.js';

// 調(diào)用模塊屬性a
console.log(my.a);
// 調(diào)用模塊函數(shù)myPrint
my.myPrint('hhh');

可見，用import * as 名字 from '模塊路徑'的方式不僅可以方便地導(dǎo)入一個模塊js文件的所有內(nèi)容，還可以自己定義一個名字以方便調(diào)用。

(4) export default - 默認(rèn)導(dǎo)出

上述的導(dǎo)出方式其實是命名式導(dǎo)出，其它文件導(dǎo)入時的變量/函數(shù)名必須和模塊中導(dǎo)出的變量/函數(shù)名一致。

但是有時候不知道我們要導(dǎo)入的js文件中的函數(shù)/變量名怎么辦呢？

可以使用默認(rèn)導(dǎo)出，即export default語句，例如默認(rèn)導(dǎo)出一個函數(shù)：

// 默認(rèn)導(dǎo)出myPrint函數(shù)
export default function myPrint(msg) {
	console.log('[]' + msg);
}

默認(rèn)導(dǎo)出后，導(dǎo)入時可以自行命名：

// 導(dǎo)入文件中默認(rèn)導(dǎo)出的函數(shù)/變量并命名為p
import p from './mymodule.js';
//使用
p('msg');

可見這里沒有使用大括號，并且導(dǎo)入時可以自行命名，不需要和原模塊中函數(shù)名一樣。

注意，一個js文件只能有一個默認(rèn)導(dǎo)出！不能多次默認(rèn)導(dǎo)出！

因此，一個有很多變量和函數(shù)的復(fù)用模塊，我們可以這么寫：

export default {
	// 變量a
	a: 'a',
	// 函數(shù)myPrint
	myPrint() {
		console.log('aa');
	}
}

調(diào)用時：

import m from './mymodule.js';

//使用
console.log(m.a);
m.myPrint();

很顯然，這里是直接默認(rèn)導(dǎo)出了一個大的匿名JavaScript對象，并把變量、函數(shù)寫在這個對象里面。然后再導(dǎo)入，調(diào)用其中變量/函數(shù)即可。

其實在vue開發(fā)中，我們用到的很多外部JavaScript的庫，都是這么做的。

事實上，我們的Vue單文件組件原理不也是這樣的？

2，在Vite工程中批量導(dǎo)入js模塊

在之前的Vue-cli開發(fā)中，我們可以使用require.context()來實現(xiàn)批量導(dǎo)入。但是由于Vite是完全基于ES6模塊的，因此就不能使用這種方式了。

當(dāng)然，官方也提供了實現(xiàn)批量導(dǎo)入的方式，用import.meta.glob或者import.meta.globEager函數(shù)實現(xiàn)。前者懶加載的導(dǎo)入，后者則為直接導(dǎo)入。今天主要講解后者。

例如我現(xiàn)在工程目錄下src/assets/js下有三個js文件：

現(xiàn)在要在根組件App.vue批量導(dǎo)入它們，則在<script>部分開頭寫：

const importModules = import.meta.globEager('./assets/js/*.js');

這樣就導(dǎo)入了./assets/js下所有js模塊文件。

當(dāng)然這種方式也可以匹配多級目錄：

const importModules = import.meta.globEager('./assets/js/**/*.js');

這樣就導(dǎo)入了./assets/js下所有js文件及其子目錄下的所有js文件。

在這里我們將其導(dǎo)入為一個變量importModules，這個變量里面到底是啥呢？我們在mounted函數(shù)里面打印一下看看：

console.log(importModules);

可見導(dǎo)入的是一個對象，這個對象中的每個屬性即為模塊路徑，而對應(yīng)的值中的default屬性即為導(dǎo)入的模塊本身，模塊的函數(shù)變量等等都在里面。因此我們可以取導(dǎo)入的變量的每個屬性下的default屬性以調(diào)用我們的模塊。

舉個例子，現(xiàn)在要調(diào)用模塊one中的print函數(shù)：

importModules['./assets/js/one.js'].default.print('hello');

到這相信大家又發(fā)現(xiàn)問題了：每次調(diào)用批量導(dǎo)入的模塊，就要用模塊的完整路徑去取，還需要帶上default屬性，及其不方便。

我們能不能實現(xiàn)就用模塊名（js文件名）去取出對應(yīng)的模塊呢？當(dāng)然可以，事實上方法很多，我來講一下我的思路。

我們將上述存放導(dǎo)入模塊的變量importModules中的每個屬性名都給用字符串裁剪的方式替換成模塊名，并將每個屬性對應(yīng)的值直接替換為它的default值不就行了嗎？我們來試一下子：

// 對批量導(dǎo)入存放模塊的對象進(jìn)行處理
// 先獲取其全部屬性
const keys = Object.keys(importModules);
// 執(zhí)行批量替換操作
for (let path of keys) {
	// 裁剪字符串方式得到路徑中的文件名（無擴(kuò)展名）
	let name = path.substring(path.lastIndexOf('/') + 1, path.lastIndexOf('.js'));
	// 對原對象執(zhí)行添加新的屬性并刪除舊屬性達(dá)到處理效果
	importModules[name] = importModules[path].default;
	delete importModules[path];
}

現(xiàn)在，我們就可以很方便地進(jìn)行調(diào)用了！

// 調(diào)用模塊one的print
importModules.one.print('hello');
// 打印模塊two的name屬性
console.log(importModules.two.name);

3，在Vite工程中批量導(dǎo)入圖片/音頻等靜態(tài)資源

在Vite中如果是想要動態(tài)綁定圖片音頻視頻等等，也是要用import語句的，同樣地圖片多了，不想一個個地import應(yīng)當(dāng)怎么做呢？

事實上，我們還可以用import.meta.globEager批量導(dǎo)入靜態(tài)資源例如圖片音頻等等。

假設(shè)現(xiàn)在在src/assets/image下有很多圖片。

我們?nèi)匀豢梢杂蒙厦娴姆绞脚繉?dǎo)入：

const importImages = import.meta.globEager('./assets/image/*');

方式和上面一模一樣，只不過這次導(dǎo)入的是靜態(tài)資源，所以說上述importImages的default變成了對應(yīng)資源的路徑。

打印看一看：

同樣地，我們可以把上述導(dǎo)入的每個default部分存起來再使用v-for批量呈現(xiàn)，試一下子，整個Vue文件代碼如下：

<template>
 <div class="app">
  <!-- 然后就可以批量呈現(xiàn)了 -->
  <img v-for="item in images" :src="item" height="150"/>
 </div>
</template>

<script>
const importImages = import.meta.globEager('./assets/image/*');

export default {
 data() {
  return {
   // 存放批量導(dǎo)入的圖片
   images: []
  }
 },
 mounted() {
  // 把導(dǎo)入的對象中每個default屬性（對應(yīng)實際導(dǎo)入的圖片）取出來放到data中的變量images中去
  for (let path in importImages) {
   this.images.push(importImages[path].default);
  }
 }
}
</script>

效果：

以上就是“怎么用Vue3+Vite批量導(dǎo)入模塊或資源”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。