Eslint не определен вопрос с импортом

Question

У меня есть App.js файл, как это:

import './bootstrap'; 

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

Он импортирует загрузчик файл JavaScript, который держит пакет NPM Vue (модуль узла).

В моем загрузочном файле я импортировать его следующим образом:

import Vue from 'vue'; 

Когда я бегу eslint с этой установкой, хотя я получаю сказал:

«Вью» не определен.

Если 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;

В import и export статьи на MDN дают хороший обзор различных возможных способов импорта и экспорта.

Answer 2

Вы можете попробовать несколько configuration из eslint в .eslintrc, чтобы получить эту работу. Эта ошибка приходит с es6-modules, вы можете попробовать играть с следующей конфигурации:

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