WebpackまたはBroserifyを使用せずに、Visual Studio 2017でモジュラーアプリケーションVue.js + Asp.NETCore + TypeScriptを作成します。そして、最初にWebpackを使用してプロジェクトを作成し、次にWebpackを使用せずに作成します。私たちが拒否する幸せを感じるために。

このマテリアルは、VS2017に対応できるように設計されており、プログレッシブJavaScriptフレームワークVue.jsに精通しています。

ビルドシステムを置き換える目的は、最新のWebアプリケーションの作成に使用するツールの数を減らすことにより、Vue.jsをマスターするための開始障壁を減らすことです。

さらに、アプリケーションのデバッグプロセスが大幅に簡素化され、アプリケーションを再構築する時間が大幅に短縮され、一部の作業シナリオでは、再構築はまったく必要ありません。

内容

はじめに

TryVueWebpackプロジェクト

- 開始ブランクの作成

- プログラムコードの追加

- 構成ファイルの追加

- アプリケーションをビルドして実行する

TryVueプロジェクト

- 開始ブランクの作成

- プログラムコードのコピー

- 構成ファイルの追加とコンパイル

- テンプレートとCSSのアセンブリ

-index.htmlの作成とアプリケーションの起動

おわりに

はじめに

Webpackは、ほとんど何でもできる強力で便利なツールです。遅かれ早かれ、Web開発に真剣に取り組むつもりなら、マスターする必要があります。

しかし、Vue.jsをTypeScriptと同時に学習するときは、不要な仲介者を本当に削除したいでしょう。少なくとも、新しいテクノロジーを習得し、簡単なタスクを行う場合。出力コードが多数のWebpackフィルターとコンバーターを消化した結果である場合、TypeScriptを理解することは困難です。

「私たちが団結する前に、そして団結するためには、まず断固として確実に自分自身を分離しなければなりません。」 V.I. レーニン

Webpackを使用しないTryVueプロジェクト：モジュール間の関係の構築と確立に関するほとんどの作業は、標準のTypeScriptコンパイラ、実行時のモジュールの読み込み-System.js、テンプレートとCSSファイルの連結-Bundler＆Minifier（VS2017のほぼフルタイムの拡張機能）によって行われます。

アプリケーションアセンブリ手順の各参加者の機能は明確に定義されており、成果物は簡単に確認でき、受け取ったものが期待どおりであることを確認できます。

まず、Webpackを使用してモジュラーアプリケーションを構築します。次に、標準のTypeScript + Bundler＆Minifierコンパイラを使用して、受け取ったアプリケーションをWebpackからアセンブリに変換します。

Webpackを取り除く方法を説明するために、TryVueWebpack、TryVue（gihubソース）という2つのプロジェクトを含むAsp.Net Coreソリューションが用意されています。 TryVueWebpackプロジェクトの構造はスクリーンショットに示されています。ここで説明する手順を実行すると、同様の結果が得られます。

非表示のスクリーンショット

TryVueWebpackプロジェクト

このガイドを作成するとき、Microsoft TypeScript開発者のTypeScript Vue Starterの例を使用しました。この例のソースコードは再構成され、Visual Studio 2017でAsp.Net Coreプロジェクトになりました。

開始ブランクを作成する

最初に、アプリケーションのスターターブランクを作成します。出発点として、空のテンプレートを使用したASP.NET Core Web Applicationプロジェクトを使用します

非表示のスクリーンショット

新しいプロジェクトで、開始ページwwwroot \ index.htmlを作成します。このページでは、Vue.jsアプリケーションの実装場所とダウンロードしたjsファイルを決定します。

スニペットの非表示テキストwwwroot / index.html

<!-- wwwroot/index.html--> ... <body> <div id="app-root">loading..</div> <script src="./dist/build.js"></script> </body>

次に、Asp.Net Coreアプリケーションを起動するときに、Startup.csファイルのクラステキストを変更して、index.htmlページを開きます。

非表示のテキストフラグメントStartup.cs

 // Startup.cs ... public class Startup { public void ConfigureServices(IServiceCollection services) { } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { app.UseDefaultFiles(); app.UseStaticFiles(); } }

これで、アプリケーションがほぼ起動していることを確認できます（VS2017はIIS Expressを起動し、「読み込み中...」がブラウザーに表示されます）。

プログラムコードの追加

ここで、vueコンポーネントとその他の必要なコードをアプリケーションに追加して、アプリケーションをコンパイルおよび実行します。

ClientApp \ componentsディレクトリに、2つのvueコンポーネント用に6つのファイルを作成します。コンポーネントごとに、CSSスタイルとTypeScriptコードを別々のファイルに取り出し、vueファイルにはテンプレート（およびcss、tsへのリンク）のみを残します。シンタックスハイライトなどのためにプラグインをインストールしないために、単一ファイルのVueコンポーネントを純粋な形式で使用しません。

隠しテキストClientApp / components / Hello

 <!-- ClientApp/components/Hello.vue --> <template> <div> <div class="greeting">Hello {{name}}{{exclamationMarks}}</div> <button @click="decrement">-</button> <button @click="increment">+</button> </div> </template> <script src="./Hello.ts" lang="ts"></script> <style src="./Hello.css"></style>

 // ClientApp/components/Hello.ts import Vue from "vue"; export default Vue.extend({ props: ['name', 'initialEnthusiasm'], data() { return { enthusiasm: this.initialEnthusiasm } }, methods: { increment() { this.enthusiasm++; }, decrement() { if (this.enthusiasm > 1) { this.enthusiasm--; } }, }, computed: { exclamationMarks(): string { return Array(this.enthusiasm + 1).join('!'); } } });

 /* ClientApp/components/Hello.css */ .greeting { font-size: 20px; }

非表示テキストClientApp / components / AppHello

 <!-- ClientApp/components/AppHello.vue --> <template> <div> Name: <input v-model="name" type="text" /> <HelloComponent :name="name" :initialEnthusiasm="5" /> </div> </template> <script src="./AppHello.ts" lang="ts"></script> <style src="./AppHello.css"></style>

 // ClientApp/components/AppHello.ts import Vue from "vue"; import HelloComponent from "./Hello.vue"; export default Vue.extend({ data() { return { name: "World" } }, components: { HelloComponent } });

 /* ClientApp/components/AppHello.css */ body { background-color: aliceblue; }

ClientAppディレクトリで、アプリケーションへのエントリポイントとして使用されるindex.tsファイルと、TypeScriptコンパイラがvueモジュールの処理方法を理解できるようにするvue-stub.tsスタブを作成します。

非表示テキストClientApp \ index.ts、ClientApp \ vue-stub.ts

 // ClientApp/index.ts import Vue from "vue"; import AppHelloComponent from "./components/AppHello.vue"; let v = new Vue({ el: "#app-root", template: '<AppHelloComponent />', //render: h => h(AppHelloComponent), components: { AppHelloComponent } });

 // vue-stub.ts declare module "*.vue" { import Vue from "vue"; export default Vue; }

構成ファイルの追加

NPM（Node.jsパッケージマネージャー）、TypeScriptコンパイラー、Webpackの構成を定義します。

NPM構成ファイルをpackage.jsonという名前でプロジェクトに追加します。 NPMパッケージの自動更新を有効にしている場合、更新に時間がかかる場合があることに注意してください。さらに、アップグレードの失敗が発生する場合があります。障害が発生した場合は、パッケージの回復を繰り返す必要がありますが、VS2017を閉じてコマンドラインからNPMパッケージをインストールすることをお勧めします。

隠しテキストpackage.json

 { "version": "1.0.0", "name": "asp.net", "private": true, "scripts": { "build": "webpack" }, "dependencies": { "vue": "^2.5.13" }, "devDependencies": { "css-loader": "^0.28.9", "ts-loader": "^3.5.0", "typescript": "^2.7.2", "vue-loader": "^14.1.1", "vue-template-compiler": "^2.5.13", "webpack": "^3.11.0" } }

tsconfig.jsonという名前のTypeScript構成ファイルをプロジェクトに追加します。このファイルは、コンパイラオプション（compilerOptions）と、コンパイラが「its」ファイルを検索するディレクトリ（include）を定義します。

隠しテキストtsconfig.json

 { "compilerOptions": { "outDir": "./built/", "sourceMap": true, "strict": true, "module": "es2015", "moduleResolution": "node", "target": "es5" }, "include": [ "./ClientApp/**/*" ] }

入力/出力ファイルとそれらの処理方法を定義するwebpack.config.jsという名前でプロジェクトにJavaScriptファイルを追加します。

隠しテキストwebpack.config.js

 // webpack.config.js var path = require('path') var webpack = require('webpack') module.exports = { entry: './ClientApp/index.ts', output: { path: path.resolve(__dirname, 'wwwroot/dist'), publicPath: 'wwwroot/dist/', filename: 'build.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { // Since sass-loader (weirdly) has SCSS as its default parse mode, we map // the "scss" and "sass" values for the lang attribute to the right configs here. // other preprocessors should work out of the box, no loader config like this necessary. 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax', } // other vue-loader options go here } }, { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/] } }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { extensions: ['.ts', '.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }

アプリケーションをビルドして実行する

完了のパフォーマンスを確認するために残ります。 Visual Studioを閉じて、プロジェクトディレクトリのコマンドラインから次の操作を行います。

 npm install npm run build dotnet run

ブラウザーで、指定されたアドレス（たとえば、 localhost ：52643）に移動します。あなたの場合、ポートはおそらく異なるでしょう。スクリーンショットに示されているようなものを取得する必要があります。

アプリケーションを構築して実行するこの方法は、最も便利な方法とはほど遠いものですが、説明は簡単でした。結果のアプリケーションをVS2017（Ctrl + F5）から直接実行するか、ブラウザーでwwwroot \ index.htmlファイルを開くだけです。

アセンブリではもう少し複雑です。 package.jsonからビルドスクリプトを頻繁に実行する必要がある場合は、VS2017の一般的な拡張機能であるNPM Task Runnerを試してください。

興味がある人は、ファイルwwwroot \ dist \ build.jsを注意深く見ることができます。このファイルのサイズは893kBで、アプリケーションのコードはコードvue.esm.jsと共にアセンブルされます。さらに、コレクターはJavaScriptコードだけでなくCSSも埋めました。このファイルの適切な場所にブレークポイントを置き、デバッガーのように聞こえる場合、Webpackが多くの有用な作業を行っていることがわかります。依存関係、キャッシュ呼び出しなどに基づいてコンポーネントの初期化を提供します。

webpack.config.jsを変更しない場合、VS2017ビルトインデバッガーはtsファイルに対して機能しません。いくつかの調査の後、{devtool： '＃eval-source-map'}の代わりに{devtool： '＃source-map'}オプションを設定すると、デバッガーが動作を開始することがわかりました。私はこの設定を大きな第一人者から取りましたが、このオプションが他にどのような影響を与えるかを知りたくないので、元のバージョンを残しました。

TryVueプロジェクト

ここで、WebpackなしでVue.js + Asp.NETCore + TypeScriptプロジェクトの作成を始めましょう。

開始ブランクを作成する

TryVueプロジェクトのスターターを作成する手順は、前述のTryVueWebpackプロジェクトの手順と同じです。スタートページwwwroot \ index.htmlは後で修正されます。

コードをコピー

前のセクションで作成したプロジェクトからClientAppフォルダーを完全にコピーします。 ClientApp / vue-stub.tsファイルを削除します。

ファイル名拡張子* .vue-> * .htmlを変更します。次に、これらのファイルでタグ<script />および<style />を削除し、<template />のid値を規定します（テンプレートの内部は変更しません）。その結果、次の結果が得られます。

 <!-- ClientApp/components/AppHello.html --> <template id="app-hello-template"> ..   .. </template>

 <!-- ClientApp/components/Hello.html --> <template id="hello-template"> ..   .. </template>

これで、「ハエ-個別、カツレツ-個別」という意味で、テンプレートがコンポーネントts-codeから分離されました。したがって、コンポーネント自体のtsコードでは、テンプレートの識別子を「テンプレート」プロパティに登録する必要があります。

 // ClientApp/components/AppHello.ts ... export default Vue.extend({ template: "#app-hello-template", ... });

 // ClientApp/Hello.ts ... export default Vue.extend({ template:"#hello-template", ... });

最後に、ファイルClientApp / AppHello.ts、ClientApp / index.tsのインポートディレクティブのリンクを修正して、単一ファイルvueコンポーネントのトレースを削除します。

 // ClientApp/components/AppHello.ts import Vue from "vue"; import HelloComponent from "./Hello"; //  "./Hello.vue" ...

 // ClientApp/index.ts import Vue from "vue"; import AppHelloComponent from "./components/AppHello"; //  "./AppHello.vue" ...

構成ファイルの追加とコンパイル

NPM構成ファイルをpackage.jsonという名前でプロジェクトに追加します。今回は、Vueパッケージを指定するだけです。通常、新しいNPMパッケージは、package.jsonの変更後に自動的にインストールされます。それ以外の場合は、コマンドを強制してパッケージを復元します。

 { "version": "1.0.0", "name": "asp.net", "private": true, "devDependencies": { "vue": "^2.5.13" } }

tsconfig.jsonという名前のTypeScript構成ファイルをプロジェクトに追加し、必要なパラメーターを規定します。

 { "compilerOptions": { "sourceMap": true, "target": "es5", "strict": true, "module": "system", "outFile": "wwwroot/dist/main.js", "moduleResolution": "node" }, "include": [ "./ClientApp/**/*.ts" ] }

TypeScriptコンパイラオプション{"module"： "system"、 "outFile"： "wwwroot / dist / main.js"}に注意してください。これらの設定により、コンパイラは、出力で受信したすべてのモジュールのjsコードを1つのファイルに収集します。さらに、これらのモジュールの特別なラッパーとSystem.jsライブラリは、相互依存関係を考慮して、正しい順序でモジュールの初期化を提供します。

Typepackコンパイラの「モジュール」オプション（値「amd」または「system」）により、Webpackを放棄できます。値{"module"： "amd"}、次に{"module"： "system"}を使用してプロジェクトをコンパイルした後、wwwroot / dist / main.jsファイルを確認します。

TypeScriptコンパイラの結果ファイルには、define（）またはSystem.register（）関数への一連の呼び出しが含まれています。関数呼び出しパラメーターでは、モジュールの相互依存関係の定義を確認できます。

 // wwwroot/dist/main.js     {"module": "amd"} define("components/Hello", ["require", "exports", "vue"], function (require, exports, vue_1) { ... }); define("components/AppHello", ["require", "exports", "vue", "components/Hello"], function (require, exports, vue_2, Hello_1) { ... }); define("index", ["require", "exports", "vue", "components/AppHello"], function (require, exports, vue_3, AppHello_1) { ... });

 // wwwroot/dist/main.js     {"module": "system"} System.register("components/Hello", ["vue"], function (exports_1, context_1) { ... }); System.register("components/AppHello", ["vue", "components/Hello"], function (exports_2, context_2) { ... }); System.register("index", ["vue", "components/AppHello"], function (exports_3, context_3) { ... });

TypeScriptコンパイラ自体が必要な作業のほとんどを実行できる場合、ヤギボタンとは一体何でしょうか。コンパイル結果を分析した後、サードパーティのヘビービルダーを取り除くためにどの方法を掘るかを明確にする必要があります。

テンプレートとCSSのアセンブリ

バンドル内のアセンブリJavaScriptが整理されています。次に、vueテンプレートとCSSバンドルを作成する必要があります。これを行うには、非常に愚かな行動をとることができます-copyコマンドを使用します（連結-アフリカ連結にもあります）。

 copy ClientApp\components\*.css wwwroot\dist\main.css copy ClientApp\components\*.html wwwroot\dist\app-templates.html

しかし、私は恐れている、彼らは私が間違っていると理解するだろう通常、GulpまたはGruntでそのようなことをするのが習慣です。 Visual Studioの特別な拡張機能であるBundler＆Minifierも使用されます。この拡張機能のインストールとアプリケーションに対処したいと考えています。私たちのケースではbundleconfig.jsonを持ち込みます：

 [ { "outputFileName": "wwwroot/dist/main.css", "inputFiles": [ "ClientApp/**/*.css" ] }, { "outputFileName": "wwwroot/dist/app-templates.html", "inputFiles": [ "ClientApp/**/*.html" ], "minify": { "enabled": false, "renameLocals": false } } ]

index.htmlの作成とアプリケーションの起動

上記を実行した後、wwwroot \ distディレクトリで、main.js、main.css、app-templates.htmlの3つのバンドルを取得する必要があります。 index.htmlを作成するだけで、その使用が保証されます。

<head />のmain.cssへのリンクを追加して、スタイルを接続します。

 <link rel="stylesheet" href="dist/main.css" type="text/css" />

<body />の最初からvueテンプレートでファイルをロードし、Vue.jsアプリケーションの実装ポイントを決定します。

 <section id="app-templates"></section> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $.get("dist/app-templates.html").done(function (data) { $('#app-templates').append(data); }); </script> <div id="app-root">loading..</div>

System.jsをダウンロードすると、必要なものがすべて読み込まれ、アプリケーションが起動します。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.19/system.src.js"></script> <script> System.config({ map: { "vue": "https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js" } }); SystemJS.import('dist/main.js').then(function (m) { SystemJS.import('index'); }); </script>

結果のアプリケーションをVisaul Studio環境で実行するのは正常です（例：F5）。組み込みのVS2017デバッガーは正常に動作し、ブレークポイントはts-modulesのコードに設定することもできます。

おわりに

Vue.jsアプリケーションの開発中にWebpackが拒否されたため、使い慣れたVS2017環境でのみ開発およびデバッグできました。バンドルの受信には、TypeScriptと連結器のみが関与します。

比較のために-Webpackを使用する場合は、少なくともwebpack、typescript、ts-loader、css-loader、sass-loader、vue-loader、vue-style-loader、vue-template-compiler、vue-がアセンブリ手順に関係していますtemplate-es2015-compiler、vue-hot-reload-api node_modulesディレクトリーの合計：約80 MBのボリュームを持つ400を超えるパッケージ。

確かに、プロダクションバージョンでは、vueテンプレートをレンダリング関数にコンパイルすると便利です。そのため、このケースの仲介者も必要になります。しかし、とにかく、Webpackがなければ、はるかに少なくなります。

Webpackを使用せずにバンドル（main.js、main.css、app-temlates.html）を収集すると、それらが何からどのように派生するかが理解されます。そのため、バンドルに小さな編集を直接行うことができます（それらをソースに転送することを忘れないでください）。特に、実験やアイデアのテストのために個々のコンポーネントをプロトタイピングする場合、時間と神経を節約することは非常に大きくなります。

ここで説明されているあなたの利益になることを願っています。

参照：

部分的に使用される記事を書くとき： TypeScript Vue Starter 。
KDPV（注意を引くための写真）の作成時には、公式製品サイトのロゴvuejs.org 、 docs.microsoft.com 、 typescriptlang.org 、 webpack.js.orgが使用されました。
私の例はgithubにあります。

。

更新03/21/2018：

このトピックに関する他の記事：

アップデート06/05/2019：

現時点では、 githubのサンプルのソースコードは記事のソースコードとは少し異なります。変更は、使用されているコンポーネントのバージョンの更新（Webpack 4.32.2、Asp.NETCore 2.2などへの切り替え）によって引き起こされます。

Vue.js + Asp.NETCore + WebpackなしのTypeScriptアプリケーション

はじめに

TryVueWebpackプロジェクト

開始ブランクを作成する

プログラムコードの追加

構成ファイルの追加

アプリケーションをビルドして実行する

TryVueプロジェクト

開始ブランクを作成する

コードをコピー

構成ファイルの追加とコンパイル

テンプレートとCSSのアセンブリ

index.htmlの作成とアプリケーションの起動

おわりに

More articles: