vue-style-loader源码初步分析

背景:

  首先声明一下,我只是个菜鸡,为了解决问题才去看的源码,解决完问题之后也就没有兴趣看其他部分代码了,所以这篇文章是一次很低层次的解读,角度也相当片面,想必会有很多喷点吧。

  事情的经过是这样,今年十月底的时候对公司前端产品的构建工具做了一次升级,从webpack1升级到了webpack4,现在已经投入正式环境,写这篇文章的时候我在外边出差,忙的时候997,闲的时候也997,这会儿就有点闲得慌,所以就想着把之前的操作复盘总结一遍,这个过程其实非常顺利,没遇到过几次报错,打开build出来的文件之后却让我莫名的诧异,我的样式并没有挂载到dom元素中,但构建过程中并没有遇到过报错。我这边使用的前端框架是vue,由于解析vue文件样式代码的过程中需要用到的loader有vue-loader css-loader(或者其他css预处理语言的loader)、vue-style-loader,于是我就把问题定位到了这几个loader上面。因为之前有成功过的案例,在确认过我的配置跟之前写的配置一样之后,我对使用的这些依赖产生了怀疑,但是我实在是很好奇到底是哪个流程中除了问题,所以就对构建流程中这部分的细节进行了一些了解。

  我起了一个新的入口文件和父组件,去除无关的代码来复现这个问题。

  不多说,直接多图警告

事 故 现 场

vue-style-loader源码初步分析

vue-style-loader源码初步分析

vue-style-loader源码初步分析

  执行完打包命令之后,按理来说打开dist目录中的index.html页面中应该就会出现一个傻不愣登的正方形色块比如:

vue-style-loader源码初步分析

  但你我都知道如果这么顺利的话就不会有这篇水文存在了,实际上打开是这样的:

vue-style-loader源码初步分析

  我之前大概了解过vue-style-loader是在style-loader的基础之上写出来的,主要功能跟style-loader类似,只是多了一些额外的特性,所以我想切换成style-loader试一下,然后愕然发现居然正常了,于是推测问题出在vue-style-loader身上,就在去看依赖的源码并做了一些尝试:
vue-style-loader源码初步分析  
vue-style-loader源码初步分析  
vue-style-loader源码初步分析  
vue-style-loader源码初步分析  
vue-style-loader源码初步分析  
vue-style-loader源码初步分析  
vue-style-loader源码初步分析

  但问题来了:

  我不可能真的去改node_modules中的vue-style-loader,因为每换一个环境,就需要改一次源码这肯定是不现实的,正确的解决办法一定不在这里。

我开始思考vue-style-loader与style-loader的区别,为什么style-loader就能顺利处理esModule呢,然后我在style-loader的代码中找到了线索,源码中有个名为options的json文件,描述了这个loader的配置项及其含义,其中有一个esModule属性:

vue-style-loader源码初步分析     于是我去github上看了style-loader的发布历史,最近的一个版本:
vue-style-loader源码初步分析  
vue-style-loader源码初步分析

  从options中的附带链接也了解到了现在的css-loader也有个配置属性esModule,从css-loader@3.4.0(2019-12-17)开始,css-loader支持esModule属性,@4.0.0(2020-07-26)开始这个属性的默认值为true。

终于破案了,实际上是因为我复盘的时候,安装的style-loader、vue-style-loader、css-loader没有指定版本,默认安装了最新的依赖,css-loader、style-loader都把配置项的esModule默认值设为了true,而vue-style-loader最后一次更新已经是快三年前了,这期间的改动没有同步,所以vue-style-loader是不处理esModule的,所以这个问题的解决方法就出来了,只需要把css-loader的options添加上esModule:false就能够解决问题。

发表评论

评论已关闭。

相关文章