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
    }
}