Geekly Articles each Day

Visual Studio 2017でnpm、Webpack、およびTypeScriptをサポートする最小限のASP.NET Core Webアプリケーションを作成します

はじめに


最初のASP.NET Coreアプリケーションテンプレート（Visual Studioからのデバッグで動作します）に基づいて、npm、Webpack、およびTypeScriptをサポートする最小限のアプリケーションをすばやく作成できるようにするために、私は主に自分用にこのチュートリアルを書いています。


やる気


私は、特にWebとJavaScriptが初めてです。 ただし、私は常に.Netを使用しています。 また、JavaScriptとその上にあるあらゆる種類のフレームワークを知っていて、今ではスタイリッシュでファッショナブルで、汚れのように若々しいと思います。 しかし、次のライブラリを感じるためには、原則として機能するように、通常はすべてのものをインストールする必要があります。


通常、サーバー（node.jsを介して）、npm、およびWebpackのようなもの（Less for workまたは何らかのテンプレート/ミニファイアー）が必要です。 ASP.NETを少し選んで（コアではなく通常）、サーバー側の対処方法を大まかに想像できますが、フロントエンドは私にとって暗い森です。


問題は、Web上の技術は通常ASP.NETではなく、node.js、php、およびその他の主流に焦点を当てていることです。 また、ドキュメントの例はすべての人にとって常にこれに基づいており、ASP.NETを最初から設定するのはそれほど簡単ではありません。


このチュートリアルでは、ASP.NET Coreのテンプレートの新しいプロジェクトから最小限の作業アプリケーションを作成する方法を示します。



このようなアプリケーションをすばやく作成する方法を知っていれば、サーバーが独自のWebサイトにある間に、Webテクノロジー（npm、Webpack、TypeScript自体を含む）を安全に学習できます。


現時点では、ASP.NETにはWebpackにあるものと同様のメカニズムが既に組み込まれており、スタジオ（Anyway 2017）はTypeScriptで動作し、TypeScriptコンパイラの構成ファイルを作成すると自動的にコンパイルされます- a。
ただし、これらすべては、Webコミュニティではなく、ASP.NET開発者によってサポートされています。


このチュートリアルの標準TypeScriptコンパイラは無効になっており、npmのモジュールであるものが使用されます。


準備する


開始するためにダウンロードしてインストールする必要があるもの



プロジェクト作成


Visual Studioを開き、標準のASP.NET Core Webアプリケーション（.NET Core）テンプレートを使用して新しいプロジェクトを作成します。 テンプレートはTemplates-Visual C＃-Webにあります 。 そのようなテンプレートがない場合、一部のコンポーネントがインストールされない可能性があります（Visual Studioインストーラーを再度実行してインストールする必要があります）。


これで、初期プロジェクトができました。コンパイルして実行する必要があります。


gitを使用する場合は、すぐに.gitignoreファイルをソリューションのあるフォルダーに追加します（そこでgitリポジトリーを初期化します）。 Visual Studioのソリューションの.gitignoreファイルは、ここから取得できます 。


完全なコードを開く


典型的なプロジェクトを簡素化する


次に、プロジェクトを可能な限りシンプルになるように変更します。
Hello Worldを作りましょう。


次のファイルを削除します



HomeControllerクラスのControllers / HomeController.csファイル内
内部を次のコードに置き換えます


 public IActionResult Index() => View(); public string Error() => "Error";

実際、 Index()およびError()メソッド以外はすべて削除されますが、 Error()はビューの代わりに文字列「Error」を返すようになりました（このビューでファイルを削除したため）。


最後の仕上げ-Views / Home / Index.cshtmlファイルの内容を次のものに置き換えます


 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Index</title> </head> <body> <h1>Hello world</h1> </body> </html>

これで、基本的な最大限単純化されたプロジェクトができました。 コンパイルして実行できます。テキスト「Hello world」がページに表示されます


完全なコードを開く


npmを追加


package.jsonファイルをプロジェクトに追加します


 { "version": "1.0.0", "name": "yourappname", "private": true }

「yourappname」の代わりに、プロジェクトの名前を小文字で入力します。


npmはnpm-debug.logという名前でログに書き込むことができます。 干渉しないように、プロジェクトから除外する必要があります。 これは、スタジオのコンテキストメニューを呼び出し、 [プロジェクトから除外 ]を選択することで実行できます。 または、まだ作成されていない場合（ほとんどの場合これが該当します）、 <Project>ルートタグに以下を追加することにより、プロジェクトの.csprojファイルを編集できます。


 <ItemGroup> <None Remove="npm-debug.log" /> </ItemGroup>

これで、npmがサポートされました。プロジェクトの依存関係で、スタジオは「npm」ノードを表示します。


プロジェクトをビルドする場合（およびプロジェクトを開くとき、 package.jsonファイルを変更するときなど）、npm依存関係が指定されている場合（現在はそうではありません）、復元プロセスが開始されます。 依存関係はプロジェクトフォルダーのnode_modulesフォルダーにダウンロードされます（Studioはこのフォルダーをプロジェクトの一部として認識しません）。


完全なコードを開く


Webpackを追加


Webpackはnpm依存関係であるため、 package.jsonに依存関係として追加する必要があります。 クライアント側のJavaScriptコードでは使用されないため、 dev依存関係として宣言されます。 私たちにとって、これは、Webpackが生成するコンテンツ（JavaScriptコードを含む）がサーバー上でもクライアント上でもVisual Studioの追加コンパイルツールとして機能することを意味します。


Webpack自体に加えて、簡単にする2つのものも必要になります（ただし、オプションです）



まず、Visual Studioの拡張機能をダウンロードしてインストールします。「NPM Task Runner」という名前で見つけるか、このリンクからダウンロードできます。


次の行をpackage.jsonに追加します（中括弧内に追加）


 "devDependencies": { "webpack": "^2.5.1", "clean-webpack-plugin": "^0.1.16" }, "scripts": { "webpack-script": "webpack" }, "-vs-binding": { "BeforeBuild": [ "webpack-script" ] }

"devDependencies"では、Webpack自体とプラグインを指定して、生成されるものをクリーンアップしました。


"scripts"で、 "webpack-script"を実行する"webpack-script"というスクリプトを指定しました（この時点で、コンテンツの生成、コードの転置など）。 以前にインストールしたVisual Studio拡張機能により、このスクリプトは実行可能なタスクとしてスタジオに表示されるため、アプリケーションの構築時にこのタスクを実行するようにスケジュールできます。


"-vs-binding" 、プロジェクトをビルドする前に、Visual Studioが"webpack-script"タスク（インストールされた拡張機能によりスタジオに表示される）タスクを呼び出す必要があることを示しました。


ここで、Webpack自体を構成する必要があります。 webpack.config.js JavaScriptスクリプトを使用して設定されます。このスクリプトは、 webpack-scriptタスクがwebpack-scriptときにnode.jsを介して実行さwebpack-scriptます。 webpack.config.jsファイルをプロジェクトに追加し、その内容を次のコードで埋めます


 "use strict" { //     output  let path = require('path'); //      (bundle)    const CleanWebpackPlugin = require('clean-webpack-plugin'); //     const bundleFolder = "wwwroot/bundle/"; module.exports = { //     entry: "./Scripts/main.js", //   output: { filename: 'script.js', path: path.resolve(__dirname, bundleFolder) }, plugins: [ new CleanWebpackPlugin([bundleFolder]) ] }; }

ここでは、JavaScriptファイルへの入力パスと出力パスを設定し、出力フォルダーをクリーニングするために以前に追加したプラグインも登録しました。


webpackは、入力に基づいて出力ファイルを生成します。 入力ファイルはまだないので、作成する必要があります。 次の内容でscripts / main.jsファイルを作成します


 document.getElementById("helloworld").innerText = "Hello world from script";

入力ファイルはwwwrootではなくScriptsフォルダーにあるため、ユーザーはアクセスできません。Webpackによって生成された出力ファイルはwwwroot / bundle /フォルダーに移動し、クライアントが利用できるようになります。


クライアント側では、出力ファイルは〜/ bundle / script.jsにあります 。ここで、 〜はWebアプリケーションが実行されているサイトのアドレスです。
Views / Home / Index.cshtmlファイルを変更して、出力ファイルが含まれるようにし、スクリプトがページ上のテキストを（helloworld要素のidによって）変更できるようにします。
これを行うには、 <body>内部を次のように置き換えます


 <h1 id="helloworld"></h1> <script src="~/bundle/script.js"></script>

gitを使用する場合は、Webpackによって生成されたファイルも除外する必要があります。 これを行うには、別の.gitignoreファイルを作成しますが、プロジェクトフォルダーに配置します（ソリューションフォルダーと混同しないでください）


 #  webpack-  wwwroot/bundle/

この場合、スタジオはプロジェクトの.gitignoreファイルを表示するため、プロジェクトの.csprojファイルでは、ルート<Project>内に次の行を追加します（まあ、またはファイルのコンテキストメニュー-> プロジェクトから除外 ）。


 <ItemGroup> <None Remove=".gitignore" /> </ItemGroup>

これで、プロジェクトはnpmとWebpackを使用するように完全に構​​成されました。 アプリケーションをコンパイルして実行すると、「Hello world from script」というテキストがページに表示されます


この段階で、 package.jsonの "dependencies"セクションで宣言し、 scripts / main.jsで使用してJavaScript関数をインストールし、 require(" ")関数require(" ")介してこれらのライブラリをモジュールとして接続します。 たとえば、この方法でjqueryライブラリをインストールする場合、 Scripts / main.jsファイルは次のように書き換えることができます（注：これは単なる例であり、jqueryをインストールしたりmain.jsを変更したりする必要はありません）


 var $ = require('jquery'); $("#helloworld").text("Hello world");

唯一のことは、Visual Studioの入力ファイルのデバッグが機能しないことです。 ただし、これはTypeScriptサポートを追加することで修正できます。


完全なコードを開く


TypeScriptを追加


まず、標準のTypeScriptトランスピレーションを無効にする必要があります。 これを行うには、 .csprojプロジェクトファイルのルート<Project>タグ内に次の行を追加します


 <PropertyGroup> <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> </PropertyGroup>

次に、npmのdev依存関係としてTypeScriptを追加します。 これを行うには、 "devDependencies"セクションのpackage.jsonファイルに次を追加します


 "typescript": "^2.3.2", "ts-loader": "^2.0.3"

次に、TypeScriptコンパイラの構成ファイルを作成する必要があります。 次の内容でtsconfig.jsonファイルを作成します


 { "compilerOptions": { "noImplicitAny": false, "noEmitOnError": true, "removeComments": false, "alwaysStrict": true, "allowSyntheticDefaultImports": true, "lib": [ "dom", "es5", "es2015.promise" ], "allowJs": true, "target": "es5", "module": "es2015", "moduleResolution": "node", "sourceMap": true }, "include": [ "./Scripts/*" ], "compileOnSave": false }

このファイルで指定されたいくつかの値の説明



次に、WebpackでTypeScriptの友達を作る必要があります。 これを行うには、 Webpack.config.js Webpackを構成するためのスクリプトファイルを次のように置き換えます（実際、一部の場所を変更しますが、すべての変更を書き込まないために、完全なファイルを投稿します）


 "use strict" { //     output  let path = require('path'); //      (bundle)    const CleanWebpackPlugin = require('clean-webpack-plugin'); //     const bundleFolder = "wwwroot/bundle/"; module.exports = { //     entry: "./Scripts/main.ts", //   output: { filename: 'script.js', path: path.resolve(__dirname, bundleFolder) }, module: { rules: [ { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules/, }, ] }, resolve: { extensions: [".tsx", ".ts", ".js"] }, plugins: [ new CleanWebpackPlugin([bundleFolder]) ], //        // (     ) devtool: "inline-source-map" }; }

ここでは、入力スクリプトの拡張子を.jsから.tsに変更し、入力スクリプトがTypeScript loader: "ts-loader" （ loader: "ts-loader" ）を介して渡されることを示し、他のいくつかのことを行いました。


最後のステップは、入力スクリプトファイルの名前をScripts / main.jsからScripts / main.tsに変更することです。内部は同じままにしておくことができます。


完全なコードを開く


まとめ


それだけです！ これで、npm、Webpack、TypeScriptを備えたASP.NET Coreで動作するプロジェクトができました。これらはすべて1つのバンドルで動作します。


TypeScriptデバッグはVisual Studioからも利用できるようになりました。入力.tsファイルにブレークポイントを設定し、デバッグモードでプロジェクトを開始できます（クロムまたはインターネットエクスプローラーブラウザーで実行する必要があります。そうしないと、デバッグは機能しません。ページをロードした後にページの更新を明示的に押した場合にのみ、明らかにデバッガはすぐにクロムに接続しません）。 同時に、ブレークポイントは入力ファイルに設定されますが、コードは実際には出力として機能します（出力コードでは、webpackは出力から入力ファイルへのマッピングに必要な情報をコメントとして書き込みます）。


Scriptsフォルダーに他の入力ファイルを.tsまたは.jsとして作成でき、両方が新しいEcmaScript標準を完全にサポートします（出力ファイルはes5標準になります）。 追加の入力ファイルを接続するには、モジュール形式でフォーマットし、 importステートメントまたはrequire()関数を介してmain.tsに接続するrequire()ます。


別の小さなコメント-出力ファイル（ wwwroot / bundle / folderにあるもの）は、 .csprojファイルを介してプロジェクトから除外しない方が良いです。スタジオがそれらを表示しない場合、入力ファイルのデバッグが機能しなくなるからです。



Source: https://habr.com/ru/post/J328638/

More articles:


All Articles