时间戳

首页 > 解决方案 > 使用一个文件夹中的所有文件，就像一个大 JS

javascript - 使用一个文件夹中的所有文件，就像一个大 JS

问题描述

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

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

我希望 ESLint 将所有这些文件都视为一个文件，因此我不会为已定义的内容收到“undef”错误。

如果它不能自动完成，我不介意创建一个手动配置来指定所有这些文件，如果可能的话。

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

所以回答@Avin_Kavish，我同意我所做的是“技术上不符合”，但在构建过程结束时，因为每个文件夹都被分组到一个文件中。该文件是模块或脚本。为了对我使用 Gradle 插件https://github.com/eriwen/gradle-js-plugin的文件进行分组，我注入了一个“闭包页眉”和一个“闭包页脚”，以及它们之间的所有文件按我想要的顺序.

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

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

编辑 2

WebPack + Electron-WebPack 原来是我想要的。

顺便说一句-我认为正确的方法是 EsLint 是否允许“文件夹”sourceType。

标签： javascriptwebstormeslint

解决方案

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

api.js

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

核心.js

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

在对这些 JavaScript 模块进行 lint 时导致错误的 ESLint 规则是no-undef规则。

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

您不必关心这些错误，因为在生产中使用的实际 JS 包中，来自api.js和core.js的代码被连接在一个包中，因此api将被定义。

所以实际上api在这个例子中是一个全局变量。

该no-undef规则允许您定义全局变量，以便它们不会导致错误。

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

使用评论

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

/* global api */

使用 ESLint 配置

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

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

边注

正如您的问题的一些评论者所指出的那样，在模块中使用import和export语句以及像webpack这样的模块捆绑工具从 JavaScript 模块创建一个捆绑包可能会更好。

推荐阅读