Vue.js中如何全局注册非NPM引入的JS库方法？

我是Vue.js的完全新手，正为一个基础需求的解决方案发愁。我有一个无法本地安装的JavaScript库，必须通过index.html中的script标签以传统方式引入：

<script src="https://foo.bar/scriptyscripts.js"></script>

该库包含大量需在应用各处使用的方法，全局加载不成问题，但组件无法识别这些方法。若将代码都放在index.html的script标签中虽能运行，但违背了组件化的初衷。

具体来说，这个脚本包含require.js和jQuery等内容，引入后require方法可用，用于按需加载其他模块（如下方代码中的"js/qlik"，它会加载jQuery及Qlik相关资源）：

// async login method here. not relevant to this problem

login().then(() => {
  require.config({
    baseUrl:
      (config.isSecure ? "https://" : "http://") +
      config.host +
      (config.port ? ":" + config.port : "") +
      config.prefix +
      "resources",
    webIntegrationId: config.webIntegrationId,
  });
  // Load js/qlik after authentication is successful
  require(["js/qlik"], function (qlik) {
    qlik.on("error", function (error) {
      $("#popupText").append(error.message + "<br>");
      $("#popup").fadeIn(1000);
    });
    $("#closePopup").click(function () {
      $("#popup").hide();
    });

    var app = qlik.openApp("caa866be-c8e1-44c8-b67b-dac9d24421fa", config);
  });
});

将该库引入index.html后，在组件中执行上述代码时，组件无法识别相关方法，出现报错：

'Module not found: Error: Can't resolve 'js/qlik'
66:11 error '$' is not defined

这说明组件未识别这些方法，因为它们不像本地NPM包那样完成了注册。请问缺失了哪些步骤才能让组件正常调用这些方法？

1. 声明全局变量，消除ESLint语法报错 #

组件里的$ is not defined报错，是因为ESLint不知道$和require是全局挂载的变量。有两种解决方式：

• 单组件声明：在组件代码顶部添加注释，告诉ESLint这两个是全局变量

  /* global $, require */
  

• 全局配置：在项目根目录的.eslintrc.js里添加全局变量配置，所有组件通用

  module.exports = {
    // ...其他配置项
    globals: {
      $: true,
      require: true
    }
  }
  

2. 明确调用全局的require.js方法，避免模块系统冲突 #

Vue项目默认用Webpack的ES Modules模块系统，和require.js的AMD模块系统会冲突。直接写require时，Webpack会把它当成自己的模块加载方法，而非全局的require.js，所以会报错找不到js/qlik。

解决办法是直接调用window.require，明确使用全局的require.js方法：

login().then(() => {
  window.require.config({
    // ...你的baseUrl等配置
  });
  window.require(["js/qlik"], function(qlik) {
    // ...后续的qlik初始化逻辑
  });
});

3. 封装工具类，实现组件化复用 #

为了不破坏组件化结构，你可以把Qlik的初始化逻辑封装成工具函数，放在src/utils/qlik.js里：

/* global $, require */

export async function initQlik(config) {
  await login(); // 假设login函数是全局可访问的
  return new Promise((resolve, reject) => {
    window.require.config({
      baseUrl:
        (config.isSecure ? "https://" : "http://") +
        config.host +
        (config.port ? ":" + config.port : "") +
        config.prefix +
        "resources",
      webIntegrationId: config.webIntegrationId,
    });
    window.require(["js/qlik"], function(qlik) {
      qlik.on("error", function(error) {
        $("#popupText").append(error.message + "<br>");
        $("#popup").fadeIn(1000);
      });
      $("#closePopup").click(function() {
        $("#popup").hide();
      });
      const app = qlik.openApp("caa866be-c8e1-44c8-b67b-dac9d24421fa", config);
      resolve({ qlik, app });
    }, reject);
  });
}

之后在需要的组件里导入使用即可：

import { initQlik } from '@/utils/qlik';

export default {
  async mounted() {
    const config = { /* 你的配置参数 */ };
    const { qlik, app } = await initQlik(config);
    // 这里可以正常使用qlik和app对象
  }
}

4. 确保脚本加载完成后再执行组件逻辑 #

如果组件在scriptyscripts.js加载完成前就执行代码，会找不到全局变量。可以在组件的mounted钩子中等待全局变量就绪：

async mounted() {
  // 循环等待，直到require和$全局变量可用
  while (!window.require || !window.$) {
    await new Promise(resolve => setTimeout(resolve, 100));
  }
  // 再执行Qlik初始化逻辑
  const { qlik, app } = await initQlik(this.config);
}

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