Question

是否可以在WebStorm中配置ESLint，以便也从同一文件夹中的文件中解析函数，变量等？在构建过程中，我将同一文件夹中的所有文件连接成大的闭包，例如：

   src/
      main/          ===> "main.js"
          api.js
          init.js
          ui.js
          constants.js
          .
          .
      renderer/      ===> "renderer.js"
          core.js
          events.js

我希望ESLint将所有这些文件当作一个文件对待，因此对于定义的内容，我不会出现“ undef”错误。

如果不能自动完成，那么我不介意创建一个手动配置，以指定所有这些文件。

编辑：为什么我不（不能）使用模块？ TLDR-旧版代码和项目要求。

我需要缩小所有代码。当前的闭包编译器可以将ES6转换为ES5，但我发现某些ES6功能非常容易产生损坏的代码。所以我被迫使用ES5。
因为我需要ES5。我将只能使用require()来使用模块。现在这是个问题，因为require（）是动态包含，并且会影响我的环境（适度功率设备的大型电子应用）

因此，要回答@Avin_Kavish，我同意我的工作是“技术上不符合”的，但是在构建过程结束时，因为每个文件夹都已分组为一个文件。该文件是模块或脚本。为了对使用Gradle插件https://github.com/eriwen/gradle-js-plugin的文件进行分组，我注入了“关闭标头”和“关闭页脚”，并按需要的顺序插入了所有文件。

尽管带来不便，但最终我得到了超级紧凑的nodeJS代码，所有方法都被混淆了，等等。

我最终使用@Patrick建议，谢谢！

编辑2

WebPack + Electron-WebPack正是我想要的。

顺便说一句，我认为执行此操作的正确方法是EsLint允许“文件夹” sourceType。

Answer 1

您没有在问题中提供代码示例，但我认为您可以执行以下操作：

api.js

const api = {
  fetchData() {
    // some code that fetches data
  }
};

core.js

const core = {
  init() {
    api.fetchData();
  }
};

当您对这些JavaScript模块进行毛刺处理时，导致错误的ESLint规则是no-undef规则。

它检查未定义使用的变量。在上面的代码示例 core.js 中，该名称为api，因为它是在ESLint不知道的另一个模块中定义的。

您不必担心这些错误，因为在生产中使用的实际JS捆绑包中， api.js 和 core.js 中的代码被串联在一起捆绑包，因此将定义api。

因此，本例中的api实际上是全局变量。

通过no-undef规则，您可以定义全局变量，以免它们引起错误。

有两种方法可以做到这一点：

使用评论

在 core.js 模块的开头，添加以下行：

/* global api */

使用ESLint配置

如here所述–将其添加到您的 .eslintrc 文件中：

{
  "globals": {
    "api": "writable"
  }
}

旁注

正如您的问题的一些评论者所指出的，最好在模块中使用import和export语句，再与webpack之类的模块捆绑工具一起创建一个从您的JavaScript模块中打包。

Answer 2

带有导入/导出语句的物理JavaScript文件是标准的模块。按标准，没有导入/导出的单个.js文件是脚本。您要尝试执行的操作与此不符，ECMAScript中没有规范允许将单个脚本或模块拆分为多个文件。例如，我确实知道您来自何处：C＃具有部分类，使您可以将一个类拆分为多个文件。但是尝试不使用标准语法来复制它是不明智的。尤其是在进出口可以而且将为您完成工作的时候

例如，根据以下假设，您的main.js可以重构为

constants.js // <--- constants
ui.js  // <--- logic to build UI
api.js  // <--- exposing public api
init.js  // <--- setup code before use

// main.js 
// If you name this index.js you can import it as 'src/main' instead of 'src/main/main.js'
import { A,B } from './constants'
import { api } from './api'
import { displayUi } from './ui'
import { init } from './init'

init(A);
displayUi(B);

export { api } // <-- re-expose public api

使用文件夹中的所有文件，例如一个大JS

2 个答案: