如何在Vue组件中导入带有依赖的第三方库？

嘿，别慌！新手刚接触ES6模块、webpack这些工具时，遇到依赖导入问题太正常了，我一步步带你搞定～

首先，我们先理清楚核心问题：之前你通过<script>标签引入时，libB是作为全局变量存在的，所以libA能直接找到它；但现在要在组件里用ES6 import，就得让webpack/babel知道这个依赖关系，或者把libB的变量暴露给libA。

第一步：先把libA和libB安装到项目里 #

如果这两个库是发布在npm上的，先打开终端跑命令安装它们：

npm install libA libB --save

如果是你自己本地的库文件，就把它们放到项目的src/libs（或者你习惯的文件夹）里，方便后续引用。

情况1：libA本身已经处理了对libB的依赖 #

很多现代npm包会在内部通过import libB from 'libB'引入依赖，这种情况最简单——你直接在ComponentA里导入libA就行：

<!-- ComponentA.vue -->
<template>
  <!-- 你的组件模板 -->
</template>

<script>
import libA from 'libA';

export default {
  name: 'ComponentA',
  mounted() {
    // 现在可以直接用libA的方法啦
    libA.doSomething();
  }
}
</script>

webpack会自动帮你把libB打包进去，不需要额外操作～

情况2：libA依赖全局的libB（和之前script标签的逻辑一样） #

有些旧库或者非ES模块的库，会期望libB是全局变量（比如window.libB），这时候我们需要让webpack把libB自动注入到全局，这样libA就能找到它了。

如果是Vue CLI项目（大部分新手用的都是这个） #

修改项目根目录的vue.config.js（没有的话就新建一个）：

const webpack = require('webpack');

module.exports = {
  chainWebpack: config => {
    // 把libB注册为全局变量
    config.plugin('provide-libB').use(webpack.ProvidePlugin, [{
      libB: 'libB'
      // 注意：如果libB暴露的全局变量名不是libB（比如是LibB），就改成对应的名字
    }]);
  }
}

如果是手动配置的webpack项目 #

修改webpack.config.js：

const webpack = require('webpack');

module.exports = {
  // 其他webpack配置...
  plugins: [
    new webpack.ProvidePlugin({
      libB: 'libB'
    })
  ]
}

配置完之后，你还是可以在ComponentA里直接导入libA使用，和情况1的代码一样～

情况3：libB是本地自定义的非npm库 #

如果libB是你自己写的或者从别的地方下载的本地文件，比如放在src/libs/libB.js，那你可以先导入libB再导入libA：

<script>
// 先导入libB（它会自动注册全局变量）
import '@/libs/libB.js';
// 再导入libA
import libA from '@/libs/libA.js';

export default {
  // ...组件代码
}
</script>

新手避坑提示 #

• 确保安装的libA/libB版本和你之前用script标签引入的一致，避免版本不兼容导致奇怪报错
• 如果导入后还是找不到libB，去看libA的官方文档，它大概率会说明依赖的全局变量名是什么（比如有些库会用$libB这种名字），然后在ProvidePlugin里改成对应的名字就行
• 如果你用的是Vue 3+，组件的写法可能略有不同，但导入逻辑是一样的

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