如何在多个环境中管理ASP.NET Core bundleconfig.json？

Question

在bundleconfig.json开发与生产环境中使用ASP.NET Core的最佳实践是什么？先前的Bundler(BundleCollection)会关注DEBUG编译器指令,而不是在调试时缩小脚本列表.

似乎新的范例是<environment>在HTML模板中有标记来测试ASPNETCORE_ENVIRONMENT值.虽然我没有看到将环境变量合并到bundleconfig.json工作流程中的方法.

我看到的一种方法是为每个包输出维护2个列表,bundleconfig.json缩小版本和非缩小版本,以便可以调试JavaScript.或者,我可以直接链接到开发<environment>代码中的非捆绑JavaScript ,然后引用production/staging <environment>标记中的捆绑和缩小版本.

无论哪种方式,都需要维护2个JavaScript文件列表(所有这些都适用于CSS文件).这似乎是向后退一步,在此之前你只需要维护一个源文件列表,而BundleCollection只会在适当的时候缩小.

我在这里遗漏了什么,或者我是否需要更进一步调查Gulp以便能够处理不同的环境？

Answer 1

我想我找到了答案.我正要创建一个HTML帮助程序来阅读bundleconfig.json开发环境,但看起来我并不是第一个认为这是个好主意的人.请注意,.NET Core实现链接到页面底部

https://github.com/madskristensen/BundlerMinifier/wiki/Unbundling-scripts-for-debugging

编辑

对于.NET Core实现,bundleconfig.json对它的引用期望它位于/ Configs文件夹中,这可能是您的项目中的情况,也可能不是.对我来说,我只是在项目的根目录中.

编辑

因此,如果源文件位于wwwroot文件夹之外,则此方法无效.拥有wwwroot文件夹之外的文件是完全合理的,所以我正在研究让html助手指向一个路径,它将以调试模式传输文件

可能解决方案

这是我解决方案的演变:

https://gist.github.com/rupe120/512a9eb837383963f80fd9ef4984eb15

更新

我修改了我的解决方案以{*filePath}在路由定义中使用,因此现在不需要对路径进行编码

更新

我认为这是我要做的最后一次重大更新.我用静态基本路由字符串替换了outputFileName来自的值bundleconfig.json.所以现在有很多调试路由,因为有缩小的文件,不用担心名称冲突.另外,您可以在调试时看到哪些文件包含在哪个包中,我觉得这很酷.

Answer 2

我不会完全称之为最佳实践，但以下对我有用。

在bundleconfig.json我准备一个用于开发的包和一个用于生产的包。用于开发的捆绑包只是连接文本，易于阅读和调试。用于生产的捆绑包被缩小，并且可以选择包含源映射。

{
    "outputFileName": "wwwroot/script.bundle.js",
    "inputFiles": [
      "wwwroot/node_modules/popper.js/dist/umd/popper.js",
      "wwwroot/node_modules/jquery/dist/jquery.js",
      "wwwroot/node_modules/bootstrap/dist/js/bootstrap.js"
    ],
    "minify": {
      "enabled": false,
      "renameLocals": false
    }
  },
  {
    "outputFileName": "wwwroot/script.min.js",
    "inputFiles": [
      "wwwroot/script.bundle.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    // Optionally generate .map file
    "sourceMap": false
  }

关键是，生产包只使用开发包。这样我只需要保留一个列表。

在需要 JS 的页面上，我为两个包添加了标签。

<environment include="Development">
    <script src="script.bundle.js" type="text/javascript"></script>
</environment>
<environment exclude="Development">
    <script src="script.min.js" type="text/javascript"></script>
</environment>