Visual

VS 使用 NPM

可以直接添加 NPM 配置文件：右键项目添加 - 新建项 - 搜索 npm。

然后直接编辑 NPM 配置文件(pacakge.json)并保存，VS 就会自动添加包。

自动创建的 node_modules 文件夹默认不被伺服，可以通过修改 Startup 手动将其伺服。

app.UseStaticFiles(new StaticFileOptions
{
    RequestPath = "/node_modules",
    FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "node_modules"))
});

参见：NuGet & NPM

前端验证

通过 jquery + jquery-validation + jquery-validation-unobtrusive 实现前端验证。

{
  "version": "1.0.0",
  "name": "tutorial",
  "private": true,
  "devDependencies": {},
  "dependencies": {
    "bootstrap": "4.3.1",
    "jquery": "3.3.1",
    "jquery-validation": "1.19.0",
    "jquery-validation-unobtrusive": "3.2.11"
  }
}

CDN 与 asp-fallback

https://www.bootcdn.cn

通过 asp-fallback-src 和 asp-fallback-test 实现回落机制，当测试发现 CDN 的 js 无法使用时，切换为本地 js。

<environment include="Development">
    <script src="~/node_modules/jquery/dist/jquery.js"></script>
    <script src="~/node_modules/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js"></script>
</environment>
<environment exclude="Development">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"
            asp-fallback-src="~/node_modules/jquery/dist/jquery.js"
            asp-fallback-test="window.jQuery"></script>
    <script src="https://cdn.bootcss.com/jquery-validate/1.19.0/jquery.validate.js"
            asp-fallback-src="~/node_modules/jquery-validation/dist/jquery.validate.js"
            asp-fallback-test="window.jQuery && window.jQuery.validator"></script>
    <script src="https://cdn.bootcss.com/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.js"
            asp-fallback-src="~/node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js"
            asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"></script>
</environment>

可以使用相似的方法配置 css 回落：

<environment include="Development">
    <link href="~/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
</environment>
<environment exclude="Development">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css"
            asp-fallback-href="~/node_modules/bootstrap/dist/css/bootstrap.css"
            asp-fallback-test-class="sr-only"
            asp-fallback-test-property="position"
            asp-fallback-test-value="absolute"
            rel="stylesheet">
</environment>

Gulp

官方推荐使用 Gulp 伺服前端库。

看了一下官方教程，还是 NPM + bundle + minify 好上手

源码

Tutorial.zip