[英]Flow and custom Webpack loaders
我使用Webpack来构建带有Flow类型的React项目。 我已经将Webpack配置为使用svg-sprite-loader导入SVG文件,如下所示:
{
test: /\.svg$/,
loader: ['svg-sprite-loader']
}
这使我可以像这样“导入” SVG文件:
import letterCellSymbol from '../styles/icons/tool-letter.svg'
然后,我可以像下面这样使用我的React组件中的文件:
<svg className="icon">
<use xlinkHref={`#${letterCellSymbol.id}`} />
</svg>
当然,这会导致流类型检查出现问题:
Error: src/components/Toolbox.jsx:70
70: <use xlinkHref={`#${letterCellSymbol.id}`} />
^^ property `id`. Property not found in
70: <use xlinkHref={`#${letterCellSymbol.id}`} />
^^^^^^^^^^^^^^^^ String
告诉Flow这些SVG文件导出类型为{id: string}
或完全忽略这些错误的正确方法是什么?
我编辑了.flowconfig
文件以包括:
[options]
module.name_mapper.extension='svg' -> '<PROJECT_ROOT>/src/helpers/SVGModule.js'
然后,我创建了文件./src/helpers/SVGModule.js
并输入:
/* @flow */
export default { id: '' }
这使Flow认为任何以.svg
结尾的导入/所需文件都将导出{id:''}
,因此该错误将被忽略。 缺点是不存在的文件不会报告为错误。
有助于我解决此问题的资料来源:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.