javascript - Eslint 未定义导入问题

Question

我有一个像这样的 App.js 文件:

import './bootstrap';

if (document.getElementById('vue')) {
    new Vue({
    });
}

它导入一个包含 Vue npm 包( Node 模块)的 bootstrap javascript 文件。

在我的引导文件中，我像这样导入它:

import Vue from 'vue';

当我使用此设置运行 eslint 时，我被告知:

'Vue' is not defined.

如果 eslinter 仅检查每个文件，这似乎非常明显，因为实际的 Vue 变量是在导入的文件中定义的。这个问题可以彻底解决吗？还是我必须针对这样的情况编辑 .eslintrc.js ？

Answer 1

我相信 ES6 导入仅适用于当前文件(这是模块系统的主要好处 - 避免全局污染)。导入没有绑定(bind)的模块也不会使得该模块的导入可用；它们的范围仅限于该模块。

您有几个选择:

1. 您可以在任何需要的地方显式导入它(模块的预期方式)。

   import Vue from 'vue';
   

2. 您可以从引导文件中导出 Vue(以及其他任何内容)并导入所有内容:

   在 bootstrap.js 中:

   import Vue from 'vue';
   export { Vue };
   

   在 App.js 中:

   import * as bootstrap from './bootstrap';
   const Vue = bootstrap.Vue;   
   

3. 您可以在引导文件中将 Vue 设为全局，但它会抵消模块的好处: window.Vue = Vue;

import和 export MDN 上的文章很好地概述了导入和导出的不同可能方式。