AngularWebpackVisualStudio

Angular Visual Studio WebPack入门

Webpack，Visual Studio，ASP.NET Core和Angular的模板。应用程序的客户端和服务器端都在一个ASP.NET核心项目中实现，这使得更容易部署。

特征

• 角度汇编
• 带有路由器的角度懒惰模块
• 角样式指南
• Webpack热模块更换
• WebPack DevServer
• 开发与生产建设
• Sass，CSS
• 使用茉莉和业力测试客户
• 测试服务器USIGN XUNIT
• Yarn ＆ npm 5

作者

Fabian Gosebrink，Damien Bowden，Roberto Simonetti

博客：

• damienbod.com
• 发行

目录

• 项目结构
• 安装
• 跑步
  • 命令
  • 发展
  • 生产
• 测试
• dotnet模板
• 笔记
• 链接

项目结构

• src
  • AngularWebpackVisualStudio asp.net核心Web API项目
    • .template.config文件夹，其中包含有关dotnet新模板的模板信息
    • wwwroot root用于Angular应用程序部署
    • AngularApp角应用
      • Main.TS汇编的入口点
      • AOT汇编的Main-AOT.TS入口点
      • 测试客户测试
    • 配置文件的配置文件夹
      • webpack.dev.js webpack配置文件用于开发
      • webpack.prod.js webpack配置文件用于生产
      • webpack.test.js WebPack配置文件用于测试
      • Spec.Bundle.js用于客户端测试
    • API控制器的控制器文件夹
    • 模型的模型文件夹
    • startup.cs Web API配置
    • 包装。Angular应用程序包
    • Karma.conf.js Karma配置用于客户端测试
    • tsconfig.json ＆ tsconfig-aot.json打字稿和NGC编译器选项
    • webpack.config.js webpack配置文件，用于开发和生产Angular应用
• 测试
  • AngularWebpackVisualStudio _tests api测试

安装

要求：

• 至少.NET Core 2.0.0
• 至少节点6.9和NPM 4

纱

您也可以使用纱线使用此模板。

视觉工作室

您的系统上已安装的Nodej需要在Visual Studio内使用，而不是Visual Studio中的Nodejs 。您需要在VS节点之前设置节点的路径。

在Visual Studio：工具 – >选项 – >项目和解决方案 – > Web软件包管理 – >外部Web工具

在Visual Studio One上方移动$（路径）选项。

NPM任务跑者

NPM任务跑步者可用于从内部Visual Studio构建客户端应用程序。此任务跑步者可以从以下下载：

https://marketplace.*visu*als*tudio.com/items?itemname=madskristensen.npmtaskrunner

跑步

ASP.NET Core应用程序既包含服务器端API服务，还包含Angular Client应用程序。 Angular Application的源代码在AngularApp文件夹中实现。然后使用WebPack使用开发构建或生产构建来部署应用程序，该构建将应用程序部署到wwwroot文件夹。这使得使用带有标准配置的Visual Studio的标准工具可以轻松地部署应用程序。

命令

NPM脚本用于构建，根据需要观看客户端应用程序。可以从命令行或NPM任务跑者运行脚本。

Watch-webpack-dev npm脚本会自动从Visual Studio开始，因为它已添加到软件包。

 \"-vs-binding\": { \"ProjectOpened\": [ \"watch-webpack-dev\" ] }

所有可用命令如下：

 \"start\": \"concurrently \\\"webpack-dev-server --env=dev --open --hot --inline --port 8080\\\" \\\"dotnet run\\\" \",
\"webpack-dev\": \"webpack --env=dev\",
\"webpack-production\": \"webpack --env=prod\",
\"build-dev\": \"npm run webpack-dev\",
\"build-production\": \"npm run webpack-production\",
\"watch-webpack-dev\": \"webpack --env=dev --watch --color\",
\"watch-webpack-production\": \"npm run build-production --watch --color\",
\"publish-for-iis\": \"npm run build-production && dotnet publish -c Release\",
\"test\": \"karma start\",
\"test-ci\": \"karma start --single-run --browsers ChromeHeadless\",
\"lint\": \"tslint ./angularApp\"

发展

对于Angular应用程序，我们使用JIT汇编。

 npm run build-dev

注意开发

 npm run watch-webpack-dev

热模块更换

 npm start

生产

对于Angular应用程序，我们使用AOT汇编，摇晃和缩小。

 npm run webpack-production

测试

ASP.NET Core API的XUNIT测试正在测试/ AngularWebpackVisualStudio _tests文件夹中：

 dotnet test

或来自Visual Studio：测试 – >运行 – >所有测试

有关Xunit测试的更多详细信息，请参见此链接：https：//docs.microsoft.com/it-it-it/dotnet/articles/core/testing/testing/unit-testing-with-with-dotnet-test-

角度测试在AngularApp/Tests文件夹中。它使用业力测试跑者和茉莉测试框架：

 npm test

运行测试和手表进行开发。如果您想使用无头浏览器进行测试，则仅一次键入

 npm run test-ci

有关角度测试的更多详细信息，请参见此链接：https：//angular.io/guide/testing

dotnet模板

要安装此软件包的模板，我们准备了一个template.json 。

只需运行dotnet new --install <PATH>在哪些路径上到达.template.config文件夹所占的路径。

之后，在命令行中运行dotnet new时，您应该看到模板

现在，您可以将Temaplte与dotnet new angularwebapi一起使用

笔记

WebPack配置还可以将所有SCSS和CSS文件构建到单独的app.cs.css或app。“ hash” .css ，可以将其作为单个文件加载到分布中。一些供应商JS和CSS也可以使用index.html文件直接加载在HTML标题中，而未包含在WebPack build中。

链接

• 懒惰加载

• 热模块更换

• 使用Visual Studio和ASP.NET Core构建生产准备的Angular应用

执照

麻省理工学院