Eslint 未定义导入问题答案

【问题标题】：Eslint not defined issue with importsEslint 未定义导入问题
【发布时间】：2017-07-12 13:04:18
【问题描述】：

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

import './bootstrap';

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

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

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

import Vue from 'vue';

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

'Vue' 未定义。

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

【问题讨论】：

标签： javascript node.js vue.js eslint

【解决方案1】：

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

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

【讨论】：

试了一堆。恐怕好像行不通。谢谢你的评论。如果其他人可能有一些想法，他们将非常受欢迎。
@Stephan-v 我希望你以正确的方式给出它，检查这个link

【解决方案2】：

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

你有几个选择：

您可以在任何需要它的地方显式导入它（使用模块的预期方式）。
```
import Vue from 'vue';
```
您可以从引导文件中导出 Vue（以及其他任何内容）并导入所有内容：

在 bootstrap.js 中：
```
import Vue from 'vue';
export { Vue };
```
在 App.js 中：
```
import * as bootstrap from './bootstrap';
const Vue = bootstrap.Vue;   
```
你可以在你的引导文件中使 Vue 成为全局的，但是它破坏了模块的好处： window.Vue = Vue;

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

【讨论】：

我知道在这个例子中 #2 是毫无意义的，因为你没有为自己保存任何代码，因为你可以替换 const Vue = bootstrap.Vue;首先使用 import Vue from 'vue';，但我希望它展示了从引导程序中定位导出的能力。