Eslint 未定义导入问题

Question

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

import './bootstrap';

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

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

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

import Vue from 'vue';

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

'Vue' is not defined.

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

Answer 1

你可以尝试几个configuration of eslint in .eslintrc to get this working. This error is coming with es6-modules，你可以尝试使用以下配置：

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

Answer 2

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

您有几个选择：

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

在bootstrap.js中：
```
import Vue from 'vue';
export { Vue };
```
在App.js中：
```
import * as bootstrap from './bootstrap';
const Vue = bootstrap.Vue;   
```
您可以在 bootstrap 文件中将 Vue 设为全局，但它会破坏模块的优势： window.Vue = Vue;

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

Eslint 未定义导入问题

Eslint not defined issue with imports

javascript

node.js

eslint

vue.js