如何在导入JavaScript插件前检查其是否存在？

根据你的目录结构，在导入插件前检查其是否存在是可行的，具体实现分Node.js环境和浏览器环境两种场景：

Node.js 环境 #

Node.js 可以通过文件系统 API 直接检查文件是否存在，再执行导入操作。

方案1：CommonJS 同步检查 #

使用 fs.existsSync 或 fs.accessSync 同步验证文件存在性：

const fs = require('fs');
const path = require('path');

// 待加载的插件列表
const pluginList = ['plugin_1.js', 'plugin_2.js', 'plugin_3.js'];

pluginList.forEach(pluginName => {
  const pluginPath = path.join(__dirname, 'plugins', pluginName);
  if (fs.existsSync(pluginPath)) {
    const plugin = require(pluginPath);
    console.log(`成功加载插件：${pluginName}`);
    // 调用插件的初始化方法（假设插件暴露init方法）
    plugin.init?.();
  } else {
    console.log(`插件不存在：${pluginName}`);
  }
});

方案2：ES 模块异步检查 #

如果使用 ES 模块（import/export），可以结合 fs.promises.access 和动态导入：

import fs from 'fs/promises';
import path from 'path';

async function loadPlugins() {
  const pluginList = ['plugin_1.js', 'plugin_2.js', 'plugin_3.js'];
  
  for (const pluginName of pluginList) {
    const pluginPath = path.join(import.meta.dirname, 'plugins', pluginName);
    try {
      // 检查文件是否可访问
      await fs.access(pluginPath);
      // 动态导入插件
      const plugin = await import(pluginPath);
      console.log(`成功加载插件：${pluginName}`);
      plugin.default?.init?.();
    } catch (err) {
      console.log(`插件不存在或无法加载：${pluginName}`);
    }
  }
}

loadPlugins();

浏览器环境 #

浏览器无法直接访问本地文件系统，只能通过动态导入的错误捕获来判断插件是否存在：

const pluginList = ['plugin_1.js', 'plugin_2.js', 'plugin_3.js'];

async function loadPlugins() {
  for (const pluginName of pluginList) {
    try {
      // 动态导入插件，若文件不存在会抛出错误
      const plugin = await import(`./plugins/${pluginName}`);
      console.log(`成功加载插件：${pluginName}`);
      plugin.default?.init?.();
    } catch (err) {
      console.log(`插件不存在或加载失败：${pluginName}`);
    }
  }
}

loadPlugins();

注意事项 #

• Node.js 中同步方法适合初始化阶段，异步方法避免阻塞主线程
• 浏览器环境下，动态导入的路径需符合前端项目的资源访问规则，若使用构建工具（如 Webpack、Vite），需确保动态导入的路径不会被错误优化
• 插件文件需符合对应模块规范（CommonJS 或 ES 模块），否则会导致导入失败

内容的提问来源于stack exchange，提问作者Dante