前言

在Vue項目開發(fā)中，我們常常會導入一些外部的模塊，或者是自己寫模塊導入。

但是模塊多了，一個個地導入很顯然不是一個好辦法，因此我們可以批量導入。

1，前置基礎知識 - JavaScript模塊化編程

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

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

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

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

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

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

// 導出常量a
export const a = 'test';

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

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

除此之外，還可以批量導出：

const a = 'test';

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

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

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

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

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

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

這樣就可以使用了。

可見import語法如下：

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

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

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

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

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

// 一次性全部導入該模塊的內(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 '模塊路徑'的方式不僅可以方便地導入一個模塊js文件的所有內(nèi)容，還可以自己定義一個名字以方便調(diào)用。

(4) export default - 默認導出

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

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

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

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

默認導出后，導入時可以自行命名：

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

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

注意，一個js文件只能有一個默認導出！不能多次默認導出！

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

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

調(diào)用時：

import m from './mymodule.js';

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

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

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

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

2，在Vite工程中批量導入js模塊

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

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

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

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

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

這樣就導入了./assets/js下所有js模塊文件。

當然這種方式也可以匹配多級目錄：

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

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

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

console.log(importModules);

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

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

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

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

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

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

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

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

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

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

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

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

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

我們?nèi)匀豢梢杂蒙厦娴姆绞脚繉耄?/p>

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

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

打印看一看：

同樣地，我們可以把上述導入的每個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 {
   // 存放批量導入的圖片
   images: []
  }
 },
 mounted() {
  // 把導入的對象中每個default屬性（對應實際導入的圖片）取出來放到data中的變量images中去
  for (let path in importImages) {
   this.images.push(importImages[path].default);
  }
 }
}
</script>

效果：

可見Vite中的批量導入非常方便，無論是模塊還是資源都可以。對于靜態(tài)資源，我們是不是還可以用這個批量導入機制，結合我之前寫的判斷各個資源加載完成的方法的文章，更加簡單地實現(xiàn)網(wǎng)站資源加載檢測并制作進度條呢？

總結

到此這篇關于如何利用Vue3+Vite批量導入模塊/資源的文章就介紹到這了,更多相關Vue3+Vite批量導入模塊資源內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！