Clever Geek Handbook

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ファむルを介しおプロゞェクトから陀倖しない方が良いです。スタゞオがそれらを衚瀺しない堎合、入力ファむルのデバッグが機胜しなくなるからです。







More articles:


All Articles