吐槽一下vue-loader

learn_shifeng 发布于2019-08-21 13:44 / 3580人阅读

摘要：前几天在如何创建一个中提到我要吐槽一下，于是今天我就来吐槽了先来看一段官网的定义啥意思就是官方推荐一个应该只做一件事情，如果对于一个文件有多次处理，可以把这些处理放在不同的里面进行链式调用。

前几天在如何创建一个webpack loader中提到我要吐槽一下vue-loader，于是今天我就来吐槽了

先来看一段webpack官网的定义：

do only a single task
Loaders can be chained. Create loaders for every step, instead of a loader that does everything at once.
This also means they should not convert to JavaScript if not necessary.
Example: Render HTML from a template file by applying the query parameters
I could write a loader that compiles the template from source, execute it and return a module that exports a string containing the HTML code. This is bad.

啥意思？就是官方推荐一个loader应该只做一件事情，如果对于一个文件有多次处理，可以把这些处理放在不同的loader里面进行链式调用。比如我们如果要写less，那么我们的webpack配置文件中应该会出现style!css!less这代表我们对于一个less文件，首先要将less处理成css，然后再有css-loader进行一些处理成js可用的css，最后通过style-loader统一抛出去。

分工明确吧？这样的好处就是style-loader和css-loader可以复用，sass，stylus都可以这么用。

那么vue-loader做了什么呢？代码我就不贴了，直接说原理吧

首先vue-loader要做的是loader一个.vue文件，这个文件中会包含html，js，css三个部分，最终的处理结果应该是css处理通过style-loader抛出去的方式，html处理成字符串，js处理成一个vue-component并require之前的html当做自己的模板，所以最终一个.vue文件最终会变成三个module

越是尤大神就在vue-loader里面做了这么一件事，vue-loader的最终产出如下：

require("!!vue-style-loader!css-loader?sourceMap!./../node_modules/vue-loader/lib/style-rewriter.js!sass!./../node_modules/vue-loader/lib/selector.js?type=style&index=0!./button.vue")
__vue_script__ = require("!!babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./../node_modules/vue-loader/lib/selector.js?type=script&index=0!./button.vue")
if (__vue_script__ &&
    __vue_script__.__esModule &&
    Object.keys(__vue_script__).length > 1) {
  console.warn("[vue-loader] example/button.vue: named exports in *.vue files are ignored.")}
__vue_template__ = require("!!vue-html-loader!./../node_modules/vue-loader/lib/selector.js?type=template&index=0!./button.vue")
module.exports = __vue_script__ || {}
if (module.exports.__esModule) module.exports = module.exports.default
if (__vue_template__) {
(typeof module.exports === "function" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__
}
if (module.hot) {(function () {  module.hot.accept()
  var hotAPI = require("vue-hot-reload-api")
  hotAPI.install(require("vue"), true)
  if (!hotAPI.compatible) return
  var id = "/Users/Jokcy/workspace/office/x-vue/example/button.vue"

其中有三个require，这几个require里面的内容前面各不相同，但是最后却有一些类似：

!./../node_modules/vue-loader/lib/selector.js?type=style&index=0!./button.vue

!./../node_modules/vue-loader/lib/selector.js?type=script&index=0!./button.vue

!./../node_modules/vue-loader/lib/selector.js?type=script&index=0!./button.vue

是的，都是通过vue-loader里面的一个selector.js去loader同一个.vue文件，也就是vue-loader正在loader的文件

所以：vue-loader根本没有处理.vue文件里面的内容！！！根本没有！他只是告诉你应该尤其他的方式来loader来处理这个文件，而且一次来还是三个（你考虑过.vue文件的感受么！！！）

可能到这里你们还没觉得这有什么不对。那我就来扯一扯

首先这个之前webpack官方的建议就不一致，vue-loader不能进行链式调用，因为他不接受在vue-loader之前处理过的内容（因为最终selector.js还是会重新去读一遍源文件），同时你也不能再vue-loader之后去修改一些内容（因为他暴露出来的内容跟原内容没半毛钱关系）。所以vue-loader是一个独立的个体，我们无法对其进行扩展，这导致我们失去了很多具有想象力的做法（比如我要做的就是对特定的.vue文件进行一些处理，自动生成文档），这样的做法让vue-loader显得有点hack，同时我们也要考虑这样的做法对未来是否真的做好了准备。

最近这半年进场看到尤大推广他的vue，并经常跟react比较，甚至从某些方面给人感觉vue相较react还有挺大的优越性。其实没必要这样做，现在的vue跟react根本没有可比性，vue目前的生态和react的生态相比简直就跟清朝人民见了美帝的军舰一样，这不是你一个人在四处游说vue的好处能抵消的。我并不是说vue不好，我现在在用vue做项目，目前一个vue的组件库也正在建立中，可能马上回开源，但目前来说，vue真的没有react好。

但不管怎样，希望尤大继续努力，可能多发展一下社区的力量，壮大一下vue的生态圈，生态圈壮大了，才能有vue更好的发展。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87741.html

如何创建一个webpack loader

摘要：在目前的开源市场，前端架构中最火热的项目非莫属了。在使用的过程中，我们会用到各式各样的，毫无疑问，因为机制的存在让拥有了无限的可能性，让几乎可以容纳一切前端需要的资源。在目前的开源市场，前端架构中最火热的项目非webpack莫属了。在使用webpack的过程中，我们会用到各式各样的loader，毫无疑问，因为loader机制的存在让webpack拥有了无限的可能性，让webpack几...

April 2019-06-24 17:48 评论0 收藏0
vue-loader 源码解析系列之 selector

摘要：当前正在处理的节点，以及该节点的和等信息。源码解析之一整体分析源码解析之三写作中源码解析之四写作中作者博客作者作者微博笔者系 vue-loader 贡献者之一（#16）前言 vue-loader 源码解析系列之一，阅读该文章之前，请大家首先参考大纲 vue-loader 源码解析系列之整体分析 selector 做了什么 const path = require(path) co...

miqt 2019-08-21 17:58 评论0 收藏0
萌新误入vue-loader洞穴 -- sourcemap

摘要：今天的主线任务是，稍微了解下的这里简单记录下打怪经历故事背景大祭司布鲁梅尔，跟玩家说在杰罗瓦镇的西北方有一个迷宫，里面有个被关闭了年的魔物，我们需要把这个魔物干掉，正好以此来测试下玩家是否具备开启者的资格，也就是战斗系转职资格。今天的主线任务是，稍微了解下vue-loader的sourcemap 这里简单记录下打怪经历故事背景大祭司布鲁梅尔，跟玩家说在杰罗瓦镇的西北方有一个迷宫，...

Atom 2019-08-21 11:24 评论0 收藏0
webpack4+vue打包简单入门

摘要：前言最近在研究使用的使用在查阅了数篇文章后学习了的基础打包流程本来就可以一删了之了但是觉得未免有点可惜所以就有了这篇文章供大家参考打包的教程具有时效性有不少作者在一直维护一篇文章超过一定时间参考价值就会下降希望各位了解这一点使用的依赖一览前言最近在研究使用webpack的使用,在查阅了数篇文章后,学习了webpack的基础打包流程. 本来就可以一删了之了,但是觉得未免有点可惜,所以...

junbaor 2019-08-26 12:21 评论0 收藏0
vue-cli 3.x配置使用vux

摘要：在中配置使用写在前面正常按照下面给定的配置，因官方更新过更新过，导致的加载错误。题后说明本人文中所提到的仅代表本人个人使用感受，并不能说明事物实际属性，大家仅在乎配置相关即可。作为非大团队维护的组件库，是一款非常优秀的基于的组件库。在vue-cli3.x中配置使用VUX 写在前面正常按照下面给定的配置，因官方更新过vue/cli3.x更新过vue-loader，导致的加载错误。之前...

KitorinZero 2019-08-22 16:43 评论0 收藏0