資訊專(zhuān)欄INFORMATION COLUMN
摘要：前幾天在如何創(chuàng)建一個(gè)中提到我要吐槽一下，于是今天我就來(lái)吐槽了先來(lái)看一段官網(wǎng)的定義啥意思就是官方推薦一個(gè)應(yīng)該只做一件事情，如果對(duì)于一個(gè)文件有多次處理，可以把這些處理放在不同的里面進(jìn)行鏈?zhǔn)秸{(diào)用。
前幾天在如何創(chuàng)建一個(gè)webpack loader中提到我要吐槽一下vue-loader，于是今天我就來(lái)吐槽了
先來(lái)看一段webpack官網(wǎng)的定義：
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.
啥意思？就是官方推薦一個(gè)loader應(yīng)該只做一件事情，如果對(duì)于一個(gè)文件有多次處理，可以把這些處理放在不同的loader里面進(jìn)行鏈?zhǔn)秸{(diào)用。比如我們?nèi)绻獙?xiě)less，那么我們的webpack配置文件中應(yīng)該會(huì)出現(xiàn)style!css!less這代表我們對(duì)于一個(gè)less文件，首先要將less處理成css，然后再有css-loader進(jìn)行一些處理成js可用的css，最后通過(guò)style-loader統(tǒng)一拋出去。
分工明確吧？這樣的好處就是style-loader和css-loader可以復(fù)用，sass，stylus都可以這么用。
那么vue-loader做了什么呢？代碼我就不貼了，直接說(shuō)原理吧首先vue-loader要做的是loader一個(gè).vue文件，這個(gè)文件中會(huì)包含html，js，css三個(gè)部分，最終的處理結(jié)果應(yīng)該是css處理通過(guò)style-loader拋出去的方式，html處理成字符串，js處理成一個(gè)vue-component并require之前的html當(dāng)做自己的模板，所以最終一個(gè).vue文件最終會(huì)變成三個(gè)module
越是尤大神就在vue-loader里面做了這么一件事，vue-loader的最終產(chǎn)出如下：
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"
其中有三個(gè)require，這幾個(gè)require里面的內(nèi)容前面各不相同，但是最后卻有一些類(lèi)似：
!./../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
是的，都是通過(guò)vue-loader里面的一個(gè)selector.js去loader同一個(gè).vue文件，也就是vue-loader正在loader的文件
所以：vue-loader根本沒(méi)有處理.vue文件里面的內(nèi)容?。?！根本沒(méi)有！他只是告訴你應(yīng)該尤其他的方式來(lái)loader來(lái)處理這個(gè)文件，而且一次來(lái)還是三個(gè)（你考慮過(guò).vue文件的感受么！?。。?/p>
可能到這里你們還沒(méi)覺(jué)得這有什么不對(duì)。那我就來(lái)扯一扯
首先這個(gè)之前webpack官方的建議就不一致，vue-loader不能進(jìn)行鏈?zhǔn)秸{(diào)用，因?yàn)樗唤邮茉趘ue-loader之前處理過(guò)的內(nèi)容（因?yàn)樽罱Kselector.js還是會(huì)重新去讀一遍源文件），同時(shí)你也不能再vue-loader之后去修改一些內(nèi)容（因?yàn)樗┞冻鰜?lái)的內(nèi)容跟原內(nèi)容沒(méi)半毛錢(qián)關(guān)系）。所以vue-loader是一個(gè)獨(dú)立的個(gè)體，我們無(wú)法對(duì)其進(jìn)行擴(kuò)展，這導(dǎo)致我們失去了很多具有想象力的做法（比如我要做的就是對(duì)特定的.vue文件進(jìn)行一些處理，自動(dòng)生成文檔），這樣的做法讓vue-loader顯得有點(diǎn)hack，同時(shí)我們也要考慮這樣的做法對(duì)未來(lái)是否真的做好了準(zhǔn)備。
最近這半年進(jìn)場(chǎng)看到尤大推廣他的vue，并經(jīng)常跟react比較，甚至從某些方面給人感覺(jué)vue相較react還有挺大的優(yōu)越性。其實(shí)沒(méi)必要這樣做，現(xiàn)在的vue跟react根本沒(méi)有可比性，vue目前的生態(tài)和react的生態(tài)相比簡(jiǎn)直就跟清朝人民見(jiàn)了美帝的軍艦一樣，這不是你一個(gè)人在四處游說(shuō)vue的好處能抵消的。我并不是說(shuō)vue不好，我現(xiàn)在在用vue做項(xiàng)目，目前一個(gè)vue的組件庫(kù)也正在建立中，可能馬上回開(kāi)源，但目前來(lái)說(shuō)，vue真的沒(méi)有react好。
但不管怎樣，希望尤大繼續(xù)努力，可能多發(fā)展一下社區(qū)的力量，壯大一下vue的生態(tài)圈，生態(tài)圈壯大了，才能有vue更好的發(fā)展。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87741.html
摘要：在目前的開(kāi)源市場(chǎng)，前端架構(gòu)中最火熱的項(xiàng)目非莫屬了。在使用的過(guò)程中，我們會(huì)用到各式各樣的，毫無(wú)疑問(wèn)，因?yàn)闄C(jī)制的存在讓擁有了無(wú)限的可能性，讓幾乎可以容納一切前端需要的資源。 在目前的開(kāi)源市場(chǎng)，前端架構(gòu)中最火熱的項(xiàng)目非webpack莫屬了。在使用webpack的過(guò)程中，我們會(huì)用到各式各樣的loader，毫無(wú)疑問(wèn)，因?yàn)閘oader機(jī)制的存在讓webpack擁有了無(wú)限的可能性，讓webpack幾...
摘要：當(dāng)前正在處理的節(jié)點(diǎn)，以及該節(jié)點(diǎn)的和等信息。源碼解析之一整體分析源碼解析之三寫(xiě)作中源碼解析之四寫(xiě)作中作者博客作者作者微博 筆者系 vue-loader 貢獻(xiàn)者之一（#16） 前言 vue-loader 源碼解析系列之一，閱讀該文章之前，請(qǐng)大家首先參考大綱 vue-loader 源碼解析系列之 整體分析 selector 做了什么 const path = require(path) co...
摘要：今天的主線(xiàn)任務(wù)是，稍微了解下的這里簡(jiǎn)單記錄下打怪經(jīng)歷故事背景大祭司布魯梅爾，跟玩家說(shuō)在杰羅瓦鎮(zhèn)的西北方有一個(gè)迷宮，里面有個(gè)被關(guān)閉了年的魔物，我們需要把這個(gè)魔物干掉，正好以此來(lái)測(cè)試下玩家是否具備開(kāi)啟者的資格，也就是戰(zhàn)斗系轉(zhuǎn)職資格。 今天的主線(xiàn)任務(wù)是，稍微了解下vue-loader的sourcemap 這里簡(jiǎn)單記錄下打怪經(jīng)歷 故事背景 大祭司布魯梅爾，跟玩家說(shuō)在杰羅瓦鎮(zhèn)的西北方有一個(gè)迷宮，...
摘要：前言最近在研究使用的使用在查閱了數(shù)篇文章后學(xué)習(xí)了的基礎(chǔ)打包流程本來(lái)就可以一刪了之了但是覺(jué)得未免有點(diǎn)可惜所以就有了這篇文章供大家參考打包的教程具有時(shí)效性有不少作者在一直維護(hù)一篇文章超過(guò)一定時(shí)間參考價(jià)值就會(huì)下降希望各位了解這一點(diǎn)使用的依賴(lài)一覽 前言 最近在研究使用webpack的使用,在查閱了數(shù)篇文章后,學(xué)習(xí)了webpack的基礎(chǔ)打包流程. 本來(lái)就可以一刪了之了,但是覺(jué)得未免有點(diǎn)可惜,所以...
摘要：在中配置使用寫(xiě)在前面正常按照下面給定的配置，因官方更新過(guò)更新過(guò)，導(dǎo)致的加載錯(cuò)誤。題后說(shuō)明本人文中所提到的僅代表本人個(gè)人使用感受，并不能說(shuō)明事物實(shí)際屬性，大家僅在乎配置相關(guān)即可。作為非大團(tuán)隊(duì)維護(hù)的組件庫(kù)，是一款非常優(yōu)秀的基于的組件庫(kù)。 在vue-cli3.x中配置使用VUX 寫(xiě)在前面 正常按照下面給定的配置，因官方更新過(guò)vue/cli3.x更新過(guò)vue-loader，導(dǎo)致的加載錯(cuò)誤。之前...
閱讀 1467·2021-11-24 09:39
閱讀 3641·2021-09-29 09:47
閱讀 1584·2021-09-29 09:34
閱讀 3087·2021-09-10 10:51
閱讀 2552·2019-08-30 15:54
閱讀 3230·2019-08-30 15:54
閱讀 883·2019-08-30 11:07
閱讀 1022·2019-08-29 18:36
