eslint import / no-extraneous-dependencies无法解决依赖关系

Question

I compiled javascript code into app.js using brunch 我使用早午餐将 javascript代码编译到app.js中

eslint gives me the following output, however in my browser everything works perfect. eslint给了我以下输出，但是在我的浏览器中，一切正常。

Error 错误

error: 'frontend' should be listed in the project's dependencies. Run 'npm i -S frontend' to add it (import/no-extraneous-dependencies) at templates/base.html:41:9:
  39 |       <script src="{% static 'handlebars/templates.js' %}"></script>
  40 |       <script>
> 41 |         require('frontend/js/index');
     |         ^
  42 |       </script>
  43 |     {% endblock javascript %}
  44 |     {% block events %}


error: Unable to resolve path to module 'frontend/js/index' (import/no-unresolved) at templates/base.html:41:17:
  39 |       <script src="{% static 'handlebars/templates.js' %}"></script>
  40 |       <script>
> 41 |         require('frontend/js/index');
     |                 ^
  42 |       </script>
  43 |     {% endblock javascript %}
  44 |     {% block events %}

My environment 我的环境

Brunch: 2.10.10
Node.js: 6.11.2
NPM: 3.10.10
Operating system: Fedora 26
Code editor: emacs

Code 码

Javascript code lives inside django template Javascript代码位于Django模板中

{% load staticfiles i18n %}
{% load static %}
<!DOCTYPE html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>{% block title %}CRM{% endblock title %}</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    {% block css %}
      {% if debug %}
        <link href="{% static 'vendor.css' %}" rel="stylesheet">
        <link href="{% static 'app.css' %}"   rel="stylesheet">
      {% else %}
        <link href="{% static 'vendor.min.css' %}"rel="stylesheet">
        <link href="{% static 'app.min.css' %}"  rel="stylesheet">
      {% endif %}
    {% endblock css %}
  </head>

  <body "page-top">
    {% include 'includes/header.html' %}
    {% block content %}
    {% endblock content %}

    {% block javascript %}
      {% if debug %}
        <script src="{% static 'vendor.js' %}"></script>
        <script src="{% static 'app.js' %}"></script>
        <script src="//localhost:35729/livereload.js"></script>
      {% else %}
        <script src="{% static 'vendor.min.js' %}"></script>
        <script src="{% static 'app.min.js' %}"></script>
      {% endif %}
      <script src="{% static 'handlebars/templates.js' %}"></script>
      <script>
        require('frontend/js/index');
      </script>
    {% endblock javascript %}
    {% block events %}
    {% endblock events %}
  </body>
</html>

Compiled app.js lives in .frontend/app.js 编译的app.js位于.frontend / app.js中

(function() {
  'use strict';

  var globals = typeof global === 'undefined' ? self : global;
  if (typeof globals.require === 'function') return;

  var modules = {};
  var cache = {};
  var aliases = {};
  var has = {}.hasOwnProperty;

  var expRe = /^\.\.?(\/|$)/;
  var expand = function(root, name) {
    var results = [], part;
    var parts = (expRe.test(name) ? root + '/' + name : name).split('/');
    for (var i = 0, length = parts.length; i < length; i++) {
      part = parts[i];
      if (part === '..') {
        results.pop();
      } else if (part !== '.' && part !== '') {
        results.push(part);
      }
    }
    return results.join('/');
  };

  var dirname = function(path) {
    return path.split('/').slice(0, -1).join('/');
  };

  var localRequire = function(path) {
    return function expanded(name) {
      var absolute = expand(dirname(path), name);
      return globals.require(absolute, path);
    };
  };

  var initModule = function(name, definition) {
    var hot = hmr && hmr.createHot(name);
    var module = {id: name, exports: {}, hot: hot};
    cache[name] = module;
    definition(module.exports, localRequire(name), module);
    return module.exports;
  };

  var expandAlias = function(name) {
    return aliases[name] ? expandAlias(aliases[name]) : name;
  };

  var _resolve = function(name, dep) {
    return expandAlias(expand(dirname(name), dep));
  };

  var require = function(name, loaderPath) {
    if (loaderPath == null) loaderPath = '/';
    var path = expandAlias(name);

    if (has.call(cache, path)) return cache[path].exports;
    if (has.call(modules, path)) return initModule(path, modules[path]);

    throw new Error("Cannot find module '" + name + "' from '" + loaderPath + "'");
  };

  require.alias = function(from, to) {
    aliases[to] = from;
  };

  var extRe = /\.[^.\/]+$/;
  var indexRe = /\/index(\.[^\/]+)?$/;
  var addExtensions = function(bundle) {
    if (extRe.test(bundle)) {
      var alias = bundle.replace(extRe, '');
      if (!has.call(aliases, alias) || aliases[alias].replace(extRe, '') === alias + '/index') {
        aliases[alias] = bundle;
      }
    }

    if (indexRe.test(bundle)) {
      var iAlias = bundle.replace(indexRe, '');
      if (!has.call(aliases, iAlias)) {
        aliases[iAlias] = bundle;
      }
    }
  };

  require.register = require.define = function(bundle, fn) {
    if (bundle && typeof bundle === 'object') {
      for (var key in bundle) {
        if (has.call(bundle, key)) {
          require.register(key, bundle[key]);
        }
      }
    } else {
      modules[bundle] = fn;
      delete cache[bundle];
      addExtensions(bundle);
    }
  };

  require.list = function() {
    var list = [];
    for (var item in modules) {
      if (has.call(modules, item)) {
        list.push(item);
      }
    }
    return list;
  };

  var hmr = globals._hmr && new globals._hmr(_resolve, require, modules, cache);
  require._cache = cache;
  require.hmr = hmr && hmr.wrap;
  require.brunch = true;
  globals.require = require;
})();

(function() {
var global = typeof window === 'undefined' ? this : window;
var process;
var __makeRelativeRequire = function(require, mappings, pref) {
  var none = {};
  var tryReq = function(name, pref) {
    var val;
    try {
      val = require(pref + '/node_modules/' + name);
      return val;
    } catch (e) {
      if (e.toString().indexOf('Cannot find module') === -1) {
        throw e;
      }

      if (pref.indexOf('node_modules') !== -1) {
        var s = pref.split('/');
        var i = s.lastIndexOf('node_modules');
        var newPref = s.slice(0, i).join('/');
        return tryReq(name, newPref);
      }
    }
    return none;
  };
  return function(name) {
    if (name in mappings) name = mappings[name];
    if (!name) return;
    if (name[0] !== '.' && pref) {
      var val = tryReq(name, pref);
      if (val !== none) return val;
    }
    return require(name);
  }
};
require.register("frontend/js/config.js", function(exports, require, module) {
'use strict';

// -------------------------------------------------------
// Common config values should go here
// =======================================================
var common = {};

// -------------------------------------------------------
// Local config
// =======================================================
var local = Object.assign({}, common, {
  api: {
    host: 'http://localhost:8000/api/v1/'
  }
});

// -------------------------------------------------------
// Development config
// =======================================================
var development = Object.assign({}, common, {
  api: {
    host: 'http://development.com/api/v1/'
  }
});

// -------------------------------------------------------
// Staging config
// =======================================================
var staging = Object.assign({}, common, {
  api: {
    host: 'http://staging.com/api/v1/'
  }
});

// -------------------------------------------------------
// Production config
// =======================================================
var production = Object.assign({}, common, {
  api: {
    host: 'http://production.com/api/v1/'
  }
});

/**
 * Returns the configuration based on domain
 * @returns {object}
 */
function getConfig() {
  switch (window.location.hostname) {
    case 'localhost':
    case '127.0.0.1':
      return local;
    case 'dev.yourdomain.com':
      return development;
    case 'staging.yourdomain.com':
      return staging;
    case 'yourdomain.com':
      return production;
    default:
      throw new Error('Unknown environment: ' + String(window.location.hostname));
  }
}

/**
 * Define actual configuration to be used
 */
var config = Object.assign({}, getConfig());

/**
 * Returns the configuration parameter
 * @param {str} key - config's key
 */
function getItem(key) {
  return key in config ? config[key] : null;
}

/**
 * Sets the configuration parameter
 * @param {str} key - config's key
 * @param {str|number|boolean} value - config's key value
 */
function setItem(key, value) {
  config[key] = value;
}

config = Object.assign(config, {
  getItem: getItem,
  setItem: setItem
});

module.exports = config;

});

require.register("frontend/js/index.js", function(exports, require, module) {
"use strict";

(function () {
  function init() {
    // put your initialization code here
    // console.log('Init');
  }

  return init;
})()();

});

require.alias("process/browser.js", "process");process = require('process');require.register("___globals___", function(exports, require, module) {


// Auto-loaded modules from config.npm.globals.
window.jQuery = require("jquery");
window["$"] = require("jquery");
window.bootstrap = require("bootstrap");
window.selectpicker = require("bootstrap-select");
window.datepicker = require("bootstrap-datepicker");


});})();require('___globals___');


//# sourceMappingURL=app.js.map

.eslintrc.js .eslintrc.js

module.exports = {
  env: {
    'browser': true,
    'commonjs': true,
    'es6': true,
    'jquery': true
  },
  plugins: [
    'html',
    'import'
  ],
  extends: [
    'airbnb-base',
    'plugin:import/errors',
    'plugin:import/warnings'
  ],
  rules: {
    'comma-dangle': ['error', 'never'],
    'no-alert': 'off'
  }
};

I understand I can turn off the rules completely, but how to resolve this issue properly? 我知道我可以完全关闭规则，但是如何正确解决此问题？

I guess I need to do something with eslint import resolver, but not sure what from their documentation. 我想我需要对eslint导入解析器做一些事情，但是不确定他们的文档中有什么。

Answer 1

eslint understands that every package that doesn't have a relative import should exist in your node_modules, just as regular require would work in node and therefore that's the reason why you are getting this error. eslint理解，每个没有相对导入的软件包都应该存在于您的node_modules中，就像常规的require可以在node中正常工作一样，因此这就是您收到此错误的原因。

your project configuration may allow you to require that module without adding ./ in its path but its not the default behavior for javascript modules. 您的项目配置可以允许您要求该模块而无需在其路径中添加./ ，但这不是javascript模块的默认行为。

eslint import / no-extraneous-dependencies无法解决依赖关系

问题描述

Error 错误

My environment 我的环境

Code 码

Compiled app.js lives in .frontend/app.js 编译的app.js位于.frontend / app.js中

.eslintrc.js .eslintrc.js

1 个解决方案

解决方案1
0 2017-10-06 02:07:34

eslint import / no-extraneous-dependencies无法解决依赖关系

问题描述

Error 错误

My environment 我的环境

Code 码

Compiled app.js lives in .frontend/app.js 编译的app.js位于.frontend / app.js中

.eslintrc.js .eslintrc.js

1 个解决方案

解决方案1 0 2017-10-06 02:07:34

解决方案1
0 2017-10-06 02:07:34