ホームページ > ウェブフロントエンド > htmlチュートリアル > vue-loader_html/css_WEB-ITnose について苦情を申し立てる

vue-loader_html/css_WEB-ITnose について苦情を申し立てる

WBOY
リリース: 2016-06-21 08:51:04
オリジナル
1435 人が閲覧しました

数日前、「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 は何をするのでしょうか?コードは投稿しません。原理についてだけ話しましょう。

まず、vue-loader は .vue ファイルをロードする必要があります。このファイルには、html、js、css の 3 つの部分が含まれます。最終的な処理結果は次のようになります。 これは、css が処理されて style-loader を通じてスローされ、html が文字列に処理され、js が vue-component に処理され、前の html を独自のテンプレートとして必要とする方法です。 1 つの .vue ファイルは最終的に 3 つのモジュールになります

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"
ログイン後にコピー
Thereそれらの 3 つの要件は、最初は内容が異なりますが、最終的にはいくつかの類似点があります:

!./../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 の selector.js を通じて同じ .vue ファイルを読み込みます。ローダー、つまり 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 がより良く発展することを願っています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート