吐槽一下vue-loader

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