Eslint未定义导入问题

Question

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

import './bootstrap';

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

它导入一个引导javascript文件，该文件包含Vue npm包（节点模块）。

在我的引导文件中，我将其导入为：

import Vue from 'vue';

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

未定义“ Vue”。

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

Answer 1

我相信ES6导入仅适用于当前文件（这是模块系统的主要优点–避免了全局污染）。 导入没有绑定的模块也不会使该模块的导入可用。 它们仅适用于该模块。

您有几种选择：

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;

在进口和出口在MDN文章提供的进口和出口的不同可能的方式很好的概述。

Answer 2

您可以在.eslintrc尝试很少的eslint 配置 ，以.eslintrc正常工作。 es6-modules出现此错误，您可以尝试使用以下配置：

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": 2
    }
}