Vue2.x如何跳过缺失依赖import报错避免构建失败

当node_modules/目录下不存在对应组件依赖时，如何让构建过程不打包该组件的import语句，跳过缺失依赖引发的import报错，避免构建流程失败。

项目架构 #

架构规则：

• Plugin App（插件应用）侧仅需导出/输出component Object
• 实际的import导入逻辑全部在MAIN APP（主应用）侧执行

预期效果 #

Plugin App内编写的import Multiselect from 'vue-multiselect'这类导入语句仅作为代理标识，实际的import加载操作由MAIN APP完成。

环境信息 #

技术栈版本：vue2.x

ESLint仅做代码规范校验，无法干预构建阶段的模块解析逻辑，因此找不到适配规则。直接通过构建层配置即可实现需求，根据项目使用的构建工具选择对应配置即可：

Webpack 方案（适配Vue CLI创建的Vue2项目） #

在插件应用的vue.config.js中配置externals字段，将需要主应用接管的依赖标记为外部依赖。构建时Webpack不会解析、打包这类import语句，也不会校验本地node_modules中是否存在对应包：

// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      // key为import时填写的包名，value为主应用挂载到全局的对应变量名
      'vue-multiselect': 'Multiselect',
      // 其余需主应用加载的依赖按相同格式追加
    }
  }
}

配置完成后，插件侧的import语句会被编译为对应全局变量的引用，不会产生缺依赖报错，也不会将依赖代码打入插件产物。主应用侧只需提前引入对应依赖并挂载到全局，即可保证插件运行时正常获取组件。

Vite 方案（适配使用Vite构建的Vue2项目） #

在插件应用的vite.config.js中配置Rollup的external规则，效果与Webpack externals完全一致：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      // 标记所有需主应用接管的依赖
      external: ['vue-multiselect'],
      output: {
        globals: {
          'vue-multiselect': 'Multiselect' // 对应全局变量名
        }
      }
    }
  }
})

配置优化 #

如果需要批量标记多类依赖无需本地安装，可通过正则匹配包名规则，无需逐个手动追加配置项。插件侧原有import语句无需任何修改，可直接保留作为依赖声明标识。

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