流无法识别 Webpack 别名答案

【问题标题】：Webpack alias is not recognized by flow流无法识别 Webpack 别名
【发布时间】：2018-11-03 02:23:42
【问题描述】：

我在使用 webpack 别名时遇到了一些问题，并且让它与 flow 配合得很好。

我有别名：

    alias: {
        vue$: 'vue/dist/vue.esm.js',
        puma: path.resolve(__dirname, 'assets/app/stores/clothes'),
    },

我通过这样的导入在我的组件中使用它：

     import components from "puma/components"

对于我的 flowconfig，我将其设置为：

 module.name_mapper='^puma\/.*' -> 'puma/\1'

我真的不确定这种 OCaml 类型的正则表达式是如何工作的......我需要一些帮助。

这篇文章的最终目标是能够解决错误：

     ^^^^^^^^^^^^^^^^ puma. Required module not found

【问题讨论】：

标签： webpack eslint flow

【解决方案1】：

想通了！

我只是不太了解name_mapper 中发生了什么，我仍然没有完全了解它，但我的猜测是：

flow 解析您的文件，然后在导入时，我认为它会对其name_mappers 进行一些检查，以查看导入语法是别名还是需要映射到其他内容。在这种情况下，当它到达puma 时，代码库中没有名为puma 的目录，但.flowconfig 中恰好有一个适合其正则表达式的name_mapper，所以它沿着映射路径向下移动到assets/app/puma/clothes.

我应用的正则表达式不正确，最后我使用了类似的东西：module.name_mapper='^puma' -> 'assets/app/stores/clothes' 让它工作。

我确实有一个问题......这对性能有多大影响？ flow 现在是否会根据name_mapper 检查每个导入以查看是否存在映射？添加新的name_mapper会不会大大降低flow的解析速度？

如果有人知道，我会非常好奇地听到它。

【讨论】：