前言

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

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

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

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

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

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

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

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

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

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

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

可見在定義變量/函數(shù)時(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ù)一次可以有多個(gè)，用大括號(hào)括起來，并且導(dǎo)入的變量/函數(shù)名必須和模塊中導(dǎo)出的變量/函數(shù)名一致！

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

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

對(duì)于上面的mymodule里面導(dǎo)出了一個(gè)變量和一個(gè)函數(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)入一個(gè)模塊js文件的所有內(nèi)容，還可以自己定義一個(gè)名字以方便調(diào)用。

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

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

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

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

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

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

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

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

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

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

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

調(diào)用時(shí)：

import m from './mymodule.js';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

console.log(importModules);

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

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

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

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

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

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

// 對(duì)批量導(dǎo)入存放模塊的對(duì)象進(jìn)行處理
// 先獲取其全部屬性
const keys = Object.keys(importModules);
// 執(zhí)行批量替換操作
for (let path of keys) {
	// 裁剪字符串方式得到路徑中的文件名（無擴(kuò)展名）
	let name = path.substring(path.lastIndexOf('/') + 1, path.lastIndexOf('.js'));
	// 對(duì)原對(duì)象執(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中如果是想要?jiǎng)討B(tài)綁定圖片音頻視頻等等，也是要用import語句的，同樣地圖片多了，不想一個(gè)個(gè)地import應(yīng)當(dāng)怎么做呢？

事實(shí)上，我們還可以用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變成了對(duì)應(yīng)資源的路徑。

打印看一看：

同樣地，我們可以把上述導(dǎo)入的每個(gè)default部分存起來再使用v-for批量呈現(xiàn)，試一下子，整個(gè)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)入的對(duì)象中每個(gè)default屬性（對(duì)應(yīng)實(shí)際導(dǎo)入的圖片）取出來放到data中的變量images中去
  for (let path in importImages) {
   this.images.push(importImages[path].default);
  }
 }
}
</script>

效果：

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

總結(jié)

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

最新評(píng)論