国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

吐槽一下vue-loader

learn_shifeng / 3581人閱讀

摘要：前幾天在如何創建一個中提到我要吐槽一下，于是今天我就來吐槽了先來看一段官網的定義啥意思就是官方推薦一個應該只做一件事情，如果對于一個文件有多次處理，可以把這些處理放在不同的里面進行鏈式調用。

前幾天在如何創建一個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更好的發展。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87741.html

相關文章

  • 如何創建一個webpack loader

    摘要：在目前的開源市場，前端架構中最火熱的項目非莫屬了。在使用的過程中，我們會用到各式各樣的，毫無疑問，因為機制的存在讓擁有了無限的可能性，讓幾乎可以容納一切前端需要的資源。 在目前的開源市場，前端架構中最火熱的項目非webpack莫屬了。在使用webpack的過程中，我們會用到各式各樣的loader，毫無疑問，因為loader機制的存在讓webpack擁有了無限的可能性，讓webpack幾...

    April 評論0 收藏0

  • vue-loader 源碼解析系列之 selector

    摘要：當前正在處理的節點，以及該節點的和等信息。源碼解析之一整體分析源碼解析之三寫作中源碼解析之四寫作中作者博客作者作者微博 筆者系 vue-loader 貢獻者之一（#16） 前言 vue-loader 源碼解析系列之一，閱讀該文章之前，請大家首先參考大綱 vue-loader 源碼解析系列之 整體分析 selector 做了什么 const path = require(path) co...

    miqt 評論0 收藏0

  • 萌新誤入vue-loader洞穴 -- sourcemap

    摘要：今天的主線任務是，稍微了解下的這里簡單記錄下打怪經歷故事背景大祭司布魯梅爾，跟玩家說在杰羅瓦鎮的西北方有一個迷宮，里面有個被關閉了年的魔物，我們需要把這個魔物干掉，正好以此來測試下玩家是否具備開啟者的資格，也就是戰斗系轉職資格。 今天的主線任務是，稍微了解下vue-loader的sourcemap 這里簡單記錄下打怪經歷 故事背景 大祭司布魯梅爾，跟玩家說在杰羅瓦鎮的西北方有一個迷宮，...

    Atom 評論0 收藏0

  • webpack4+vue打包簡單入門

    摘要：前言最近在研究使用的使用在查閱了數篇文章后學習了的基礎打包流程本來就可以一刪了之了但是覺得未免有點可惜所以就有了這篇文章供大家參考打包的教程具有時效性有不少作者在一直維護一篇文章超過一定時間參考價值就會下降希望各位了解這一點使用的依賴一覽 前言 最近在研究使用webpack的使用,在查閱了數篇文章后,學習了webpack的基礎打包流程. 本來就可以一刪了之了,但是覺得未免有點可惜,所以...

    junbaor 評論0 收藏0

  • vue-cli 3.x配置使用vux

    摘要：在中配置使用寫在前面正常按照下面給定的配置，因官方更新過更新過，導致的加載錯誤。題后說明本人文中所提到的僅代表本人個人使用感受，并不能說明事物實際屬性，大家僅在乎配置相關即可。作為非大團隊維護的組件庫，是一款非常優秀的基于的組件庫。 在vue-cli3.x中配置使用VUX 寫在前面 正常按照下面給定的配置，因官方更新過vue/cli3.x更新過vue-loader，導致的加載錯誤。之前...

    KitorinZero 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<