webpack--手写loader

背景

    项目中的面包屑导航需要每次在组件中引入、注册并使用,考虑做优化:只引入并注册使用一次,且要能满足一些特殊情况

分析

    引入一次的实现比较简单,只需要在视图出口或者根组件引入即可

    特殊情况指的是:局部引入、不使用面包屑

        不使用面包屑比较简单,只需要做个close标识即可,但是这个标识怎么传递给在根组件显示的面包屑是个问题,比较通俗的做法是使用eventBus或者vuex来发送一个message,又或者,在全局做一个配置文件,然后在面包屑组件中去读取,这还不算很麻烦

        当局部引入时,不仅要关闭全局的面包屑,还要保证局部生效,这也就意味着,我们至少还需要一个属性来做标识,这样就比较麻烦了....

改造目标

    既要满足上述需求,又不需要使用者太麻烦

实现

    选择在app.vue中引入来达到面包屑提升的目的

    通过v-close-crumbs关闭全局面包屑,同时允许局部引入使用以满足特殊用法

        只要使用者在根元素指定了v-close-crumbs,我们就在loader内开始一些增删操作,这本质上是字符串操作

            框红一的位置,对该指令作判断,只有标记了该属性的才进入我们的逻辑

            框红二的位置,将指令删除,否则在vue编译阶段会报指令不存在

            框红三的位置,向面包屑传递属性标识是否是局部使用

            框红四的位置,向全局面包屑发消息,以控制其显示或隐藏

        之后,在面包屑组件作监听,以控制其显示或隐藏

    最后,将我们的loader发布到npm后,并在webpack中引用即可

你可能感兴趣的:(webpack--手写loader)