模块和自动加载编辑

自动加载编辑

由于 JS 模块与指令、过滤器和服务的脱节,很难知道要导入哪些内容。更难的是,您不知道自己移除的看似无用的模块是否会对其他地方产生影响。

为了防止其成为一个问题,ui 模块提供了 “自动加载(autoloading)” 模块。这些模块的唯一目的是使用某些组件拓展环境。以下是这些模块的分解:

  • import 'ui/autoload/styles'src/ui/public/styles 导入所有样式。
  • import 'ui/autoload/directives'src/ui/public/directives 导入所有指令。
  • import 'ui/autoload/filters'src/ui/public/filters 导入所有过滤器。
  • import 'ui/autoload/modules' 导入 Kibana 依赖没有导入的 angular、一些 ui 服务和 “组件”。需要导入的全量列表被硬编码在模块中。随着我们正确地定位出所需模块并将其导入到需要它们的位置,这个列表可能会逐渐缩小。
  • import 'ui/autoload/all' 导入所有上述模块

解析所需路径编辑

Kibana 用 Webpack 管理依赖。

下面是如何将 import/require 语句解析为一个文件:

  1. 检查模块路径的开头

    • 如果路径以 . 开头

      • 添加当前文件的目录
      • 转到 3
    • 如果路径以 / 开头

      • 搜索这条精确路径
      • 转到 3
    • 转到 2
  2. 搜索已命名模块

    • moduleName = dirname(require path)
    • 如果 moduleName 是下面别名中的一个,或者以下面中的别名开头,则匹配

      • 用匹配替换别名,继续 3
    • 当满足这些条件时,匹配:

      • ./webpackShims/${moduleName} 是一个目录
      • ./node_modules/${moduleName} 是一个目录
    • 如果没有找到匹配

      • 转到上层目录
      • 从 2.iii 重新开始,直至找到匹配或者到达根目录
    • 如果找到匹配

      • 以匹配的全路径替换 requite 语句中的 moduleName 前缀,然后转到 3
  3. 搜索文件

    • 下列路径中第一个解析为一个 file 的是我们的匹配

      • path + .js
      • path + .json
      • path + .jsx
      • path + .less
      • path
      • path/${basename(path)} + .js
      • path/${basename(path)} + .json
      • path/${basename(path)} + .jsx
      • path/${basename(path)} + .less
      • path/${basename(path)}
      • path/index + .js
      • path/index + .json
      • path/index + .jsx
      • path/index + .less
      • path/index
    • 如果以上路径均不匹配则抛出错误