数日前、「Webpack ローダーの作成方法」で vue-loader について文句を言いたいと書きましたので、今日はそれについて文句を言います
まず、webpack 公式 Web サイトの定義を見てください。
単一のタスクのみを実行します。 ローダーは、すべてを一度に実行するのではなく、ステップごとにチェーンできます。 >
これは、必要がない場合は JavaScript に変換すべきではないことも意味します。例: クエリ パラメーターを適用して、テンプレート ファイルから HTML をレンダリングします
ソースからテンプレートを取得し、それを実行すると、HTML コードを含む文字列をエクスポートするモジュールが返されます。これは問題です。
これはどういう意味ですか?ファイルが複数回処理される場合、ローダーは 1 つのことだけを実行することが公式に推奨されており、これらのプロセスはチェーン呼び出しのために別のローダーに配置できます。たとえば、less を記述したい場合は、webpack 設定ファイルに style!css!less を含める必要があります。これは、less ファイルの場合、まず、less を css に処理してから、css-loader を使用して何らかの処理を実行する必要があることを意味します。 css は最終的に style-loader を通じて均一にスローされます。
明確な役割分担はありますか?この利点は、style-loader と css-loader を再利用でき、sass と stylus の両方をこの方法で使用できることです。
それでは、vue-loader は何をするのでしょうか?コードは投稿しません。原理についてだけ話しましょう。
You Dashen が 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.defaultif (__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"
!./../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 は .vue ファイルの内容をまったく処理しません。 ! !全くない!彼は、ローダーを使用してこのファイルを独自の方法で処理する必要があるとだけ言っていますが、まだ一度に 3 つあります (.vue ファイルの感触を考慮したことがありますか!!!)
多分あなたは理解しているでしょう。まだ何かがおかしいと感じていません。それからそれについて話しましょう
まず第一に、以前の公式 Webpack の推奨事項は矛盾しています。ただし、ソース ファイルを再度読み取る必要があります)、vue-loader の後で一部のコンテンツを変更することはできません (公開されたコンテンツは元のコンテンツと何の関係もないため)。そのため、vue-loader は独立したエンティティであり、拡張することができないため、多くの想像力豊かな実践が失われます (たとえば、私がやりたいのは、特定の .vue ファイルに対して何らかの処理を実行し、ドキュメントを自動的に生成することです)。このアプローチでは、vue-loader が少しハッキングされているように見えますが、同時に、このアプローチが本当に将来に向けて準備ができているかどうかも考慮する必要があります。
過去 6 か月間、私は Youda が vue を宣伝しているのを見てきましたが、それを React と比較することが多く、ある面では vue には React よりも大きな利点があるとさえ感じます。実際、これを行う必要はありません。現在の Vue と React の生態を比較すると、清朝の人々が軍艦を見ているのと同じです。アメリカの皇帝、これはあなただけが Vue のためにロビー活動をすることで得られるものではありません。 Vue が良くないと言っているわけではありません。現在、Vue コンポーネント ライブラリが構築されており、間もなくオープンソースになる可能性があります。しかし、今のところ、Vue は React ほど優れていません。
しかし、何はともあれ、私は Youda が今後も懸命に働き、おそらくコミュニティの力をさらに発展させ、エコシステムが強化されて初めて Vue がより良く発展することを願っています。