问像一个大JS一样使用文件夹中的所有文件
EN

Stack Overflow用户

提问于 2019-06-16 01:22:03

回答 2查看 561关注 0票数 8

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

   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 +电子-WebPack原来就是我要找的。

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

webstorm

eslint

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-16 02:27:34

您没有在问题中提供代码示例，但我假设您会这样做：

api.js

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

core.js

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

当您链接这些ESLint模块时导致错误的JavaScript规则是非德夫规则。

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

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

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

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

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

使用注释的

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

/* global api */

使用ESLint Config

如前所述，这里 --将其添加到.eslintrc文件中：

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

边注

正如对您的问题的一些评论者所指出的，最好在模块中使用导入和导出语句，以及像webpack这样的模块捆绑工具，从JavaScript模块创建一个包。

票数 4

Stack Overflow用户

发布于 2019-06-16 02:49:06

带有导入/导出语句的物理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