ASP.NET Core + Angular 2 Template for Visual Studio服务器端预加载的意义何在?Webpack 开发中间件模块热拔插(HMR)

多个月以来,我和多个Github上的社区贡献者一起建立支持库、包,我们最终的目的是希望完成这样一个作为起点的模板,也就是基于把Typescript代码和Angular2宿主在ASP.NET Core项目中,这个模板包含一下这些方面:

  • 服务端预加载(预渲染):这样你的UI可以快速的显示,甚至在浏览器下载Javascript之前。
  • Webpack中间件集成:在开发期间,你不需要一直重新编译你的客户端项目,或者你可以用一个watcher工具在后台帮你做这些事。
  • 模块热拔插:在开发期间,一旦你编辑了一个Typescript文件、CSS文件、或者其他客户端资源,你的改变也将在不刷新页面的情况下立即推送到浏览器。
  • 快速构建:对于开发来说,你不需要再等待再每次更改之后,webpack去重新解析第三方代码,因为第三方类库将会独立到另外的一个bundle中,另外,超快速的构建包含了所有的map文件便于调试,再发布版本的文件中却将直接输出压缩版本,再发布过程中,这些工作将自动完成。

那如果你想使用一个不一样的framework呢?如果你倾向于React、React+Redux或者Knockout,我们也同样为他们提供了模板

假如你是在Linux和MacOS开发,或者使用其他IDE,使用我们的Yeoman生成器来获得在VS Code或者其他编辑器上对于Angular2、React、React+Redux或者knockout项目的相同支持,.NET Core是完全跨平台的。

安装

首先,确保你已经安装了一下必须内容,没有他们事情就无法进行下去了:

当你确认过以上内容安装之后,下载并安装 ASP.NET Core Template Pack Extension

创建并且运行项目

当你完成安装以上所有内容后,你可以打开VS2015 创建新项目,展开Web目录,选择 ASP.NET Core Angular2 Starter Application(.NET Core)

键入一个名字,点击OK,现在耐心等待一段时间,让Node.js安装所有依赖项目,考虑你的网络环境,这可能需要一段时间(而且,考虑国内环境)

一切就绪之后,项目中看起来可能回出现一点问题,但是实际上并不是这样,当VS2015完成安装依赖后将会显示not installed

然后,VS犯了个错,事实上是因为一个只在macos上的可选依赖没有安装成功,你可以选择视而不见,但是如果你是个强迫症患者,那么看这里,追随大神的脚步,去解决掉它。

现在,你可以运行这个项目了,按下Ctrl+F5试试吧,以下内容将会显示在你的浏览器里:

服务端预渲染

在浏览一遍这个站点之后,你会发现一些简单的angluar2 component的例子,这看起来倒不是什么牛逼了的事,但是歧视已经在你看不见的地方发生了一些牛逼拉瞎的事情。

第一件事,虽然通常angular2运行在浏览器里,但是ASP.NET Core Server也可以让他运行在服务器端,所以它可以仅将HTML代码发送到浏览器,不需要javascript就可以显示内容。

为了证明它,你可以通过禁用浏览器的Javascript功能,然后刷新页面来查看内容,对于Chrome来说,你可以打开F12控制台,点击设置,在里面找到Disable Javascript复选框,并且反选它。

刷新页面,你会发现一切看起来和之前一样,左边的tab还是可以工作,但是一些依赖javascript的内容就不再可以运行了,比如counter。

服务器端预加载的意义何在?

意义并不在于让支持哪些不运行javascript的浏览器,它只是一种极端情况而已(如果为了这种极端情况,那还为什么要建立一个SPA应用呢?)

它真正的意义在于:

  1. 它极大的提高了用户体验:及时他们是在一个较慢的网络环境或者设备上,也可以在很快的看到你想显示给他们的内容,在这背后,你可能又一个很大的捆绑javascript正在下载、转换并且执行,然后紧接着接管页面实现绑定你的那些功能,这比花很长时间加载javascript代码,让客户看到一个空白的网页好的多。
  2. 它支持一些能不运行javascript的爬虫:对于搜索引擎来说,返回简单的HTML代码对于他们来说是更简单的理解和收录的。

假如你不想使用预加载,可以通过移除在Views/Home/Index.cshtml中的app标签的asp-prerender-module属性来禁用它。

Webpack集成

当前系统里的代码使用typescript编写,这就是说你需要在运行它之前先构建它,就像你使用SASS一样,需要在使用之前编码,甚至捆绑和压缩它。

目前最兴盛的modern javascript构建系统是Webpack,它类似Grunt和Gulp,但是在2017的今天(原文中是2016),Webpack是最流行的typescript编译、捆绑和压缩工具,我们在template中使用它的几个非常酷的功能:

Webpack 开发中间件

通常来说,一旦你改变任何一个Typescript文件,你都需要去运行webpack来重新生成javascript文件,但是webpack开发中间件会帮助你做这些工作。

如果你的项目运行在VS默认开发模式下,webpack会在后台监控你每一个到http://yoursite/dist的请求,它处理每一个请求并且返回一个编译过的代码文件。

模块热拔插(HMR)

在有任何代码修改之后,通常我们需要刷新页面来应用这些修改,但是这对于效率和调试方便性来说是很不友好的。

模块热拔插(HMR)解决了这个问题,在默认的开发模式下,它会监测对于angular项目文件的任何改变(Typescript,css,html),当改变发生,它会自动触发一次快速的编译,并且托送所有改变的文件到活动的浏览器窗口,你的应用程序将会在不刷新页面的情况下啊立即应用改变。

你可以通过打开控制才来观测它的工作,当VS开始调试,浏览器控制台将会显示以下内容:

看到[HMR] Connected的字眼了吗?它代表已经准备好接收新的文件了,尝试更改一个源文件。比如:ClientApp/app/components/home/home.component.html。

原文地址:http://www.dotnet.online/Article/66/ASP-NETCoreAngular2TemplateforVisualStudio

源地址:http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

本文翻译征得了原作者Steve Sanderson的同意,感谢他为ASP.NET Core做出的杰出贡献。

转载请注明出处

白玉龙 2017/1/9

我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏电光石火

eclipse从数据库逆向生成Hibernate实体类

     做项目必然要先进行数据库表设计,然后根据数据库设计建立实体类(VO),这是理所当然的,但是到公司里做项目后,让我认识到,没有说既进行完数据库设计后...

2189
来自专栏Python攻城狮

Linux(Debian)环境下使用Fiddler及Robo 3T 1.1

Fiddler是一个蛮好用的抓包工具,可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。

964
来自专栏从零开始学自动化测试

Appium+python自动化16-启动ios上Safari浏览器

前言 在mac上搭建appium踩了不少坑,先是版本低了,启动后无限重启模拟器。后来全部升级最新版本,就稳稳的了。本篇介绍如何用appium启动ios上的saf...

4624
来自专栏沈唁志

如何加速WordPress网站

本指南提供了一个测试环境,用于说明优化WordPress的过程。环境有两个组成部分:

2103
来自专栏IMWeb前端团队

Atom编辑器配置

本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载 Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。具有简洁...

3037
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理

在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能给系统用户更好的操作体验,也提高了用户录入数据的效率。我...

2157
来自专栏前端杂货铺

puppeteer实现线上服务器任意区域截图

整个九月份由于业务繁重以及玩心颇重,一直没有机会来写一篇博文。而且笔者于十月一日将会举办人生大事--婚礼,现在家里筹办过程中只能抽出零碎的时间来写这篇文章。

1962
来自专栏张戈的专栏

WordPress静态缓存三剑客,强力推荐!

之前一直用的 wp-super-cache,效果确实非常不错!网络不出问题的话,页面基本秒开。可惜,这款插件有时候会缓存我的手机主题,导致在电脑上浏览时,呈现的...

4405
来自专栏wOw的Android小站

[iOS] Win8下在Vmware11中安装使用苹果系统OS X 10.10

  近来因为需要做 iOS 的项目,所以需要多花一些时间看看敲敲代码。因为自己手头上并没有 Mac(过年为了闲的时候能玩玩游戏买了联想,唉),想想不能只靠每天在...

1270
来自专栏算法修养

Atom打造 c/c++编译环境(忙了一个上午)

众所周知 Atom是一款非常酷炫的编辑器。因为它就像上古卷轴一样,玩家可以开发各种dlc补丁,实现自己想要的效果。所以Atom 可以被你改造成自己想要的东西,可...

4717

扫码关注云+社区