标签: bundling-and-minification

是否有一个内置的方法来跟踪是否已经加载了一个包？我有几个编辑视图,例如需要jquery和jquery.Validate等库.我不需要在主布局页面上引用它.由于页面可能包含几个不同的条件库...理想情况下我希望@ scripts.Render知道我是否已经引用了一个库并阻止了它的重新加载.

干杯蒂姆

我们最近将我们的项目从MVC 3升级到MVC 4.我们的目标是.NET 4.0框架,由于我们必须包含一些参考,我们的Web应用程序是32位的.

我们遇到的问题是我们将捆绑/缩小从Chirpy转换为内置的ASP.NET捆绑.该站点在32位服务器上运行,包括仅运行.NET 4.0的Windows Server 2003/IIS 6和2008/IIS 7.5以及我们的64位开发计算机.捆绑/缩小在上述所有方面都能正常工作.

在仅安装了.NET 4.0的64位Windows 2008/IIS 7.5服务器上,捆绑不起作用.生成的脚本和样式都会出现404错误.

如果我们在64位服务器上安装.NET 4.5,它可以正常工作.我们对此感到困惑,因为有些服务器在没有.NET 4.5的情况下工作,而这一点需要它.最重要的是,Windows Server 2003/64位与.NET 4.5不兼容,因此如果这也存在问题,则此修复程序将不起作用.

奇怪的是,针对.NET 4.0构建x86的示例MVC 4示例互联网应用程序在问题服务器上只有4.0就可以正常工作.除了unity,logging,elmah和dot less配置之外,web.config完全相同.

任何有关这方面的帮助将非常感激.

这是BundleConfig.cs:

using System.Web;
using System.Web.Optimization;

namespace WebApp
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.UseCdn = false;

            // .debug.js, -vsdoc.js and .intellisense.js files 
            // are in BundleTable.Bundles.IgnoreList by default.
            // Clear out the list and add back the ones we want to ignore.
            // Don't add back .debug.js.
            bundles.IgnoreList.Clear();
            bundles.IgnoreList.Ignore("*-vsdoc.js");
            bundles.IgnoreList.Ignore("*intellisense.js"); …

我正在使用Dotless和System.Web.Optimizations.LessBundle在我的MVC 5应用程序中包含Less stylesheets.一切都在我的本地机器上的Debug和Release中工作.

我基本上遵循了这个博客文章所做的相同步骤.

我的包代码如下所示:

bundles.Add(new LessBundle("~/Content/css/mySheet").Include(
    "~/Content/lib/normalize/normalize.css",
    "~/Content/site/my/sheet.less"));

在开发本地我最终得到这样的链接:

http://localhost:57240/Content/site/my/sheet.less

在本地发布我最终得到这样的链接:

http://localhost:57240/Content/css/mySheet?v=zGP7kp7SWQZ0s2SVk555UPp3zcThPaRqzm6bTysZJzE1

但是,当我将Release版本部署到Azure网站(使用Visual Studio发布机制)时,我最终得到一个如下所示的链接:

http://mypage.azurewebsites.net/Content/css/mySheet?v=

如您所见,魔术标识符未附加到URL的末尾.

是什么赋予了？

我需要将我的 Angular 应用程序构建为具有内联脚本和样式的单个 HTML 文件。默认情况下，Angular 会构建几个 js 文件和一个 css 文件，并通过 src 属性将它们添加到我的 index.html 中。

我发现了一个名为的插件html-webpack-inline-source-plugin，但它没有做任何事情。（可能是因为角度？）

有谁知道使用 webpack 将角度应用程序构建到单个文件中的另一种方法，或者是否有另一个包可以这样做？我已经做了一些研究，但没有找到解决方案。

先感谢您！

编辑：

我尝试使用以下自定义 webpack 配置，但它不会更改输出。

自定义-webpack.config.js

var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            inlineSource: '.(js|css)$'
        }),
        new HtmlWebpackInlineSourcePlugin()
    ]
}

我添加bundleconfig.json到 ASP.NET Core 应用程序。它具有以下结构：

[
  {
    "outputFileName": "wwwroot/js/main.min.js",
    "inputFiles": [
      "wwwroot/js/scripts/first.js",
      "wwwroot/js/scripts/second.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

两个脚本都已缩小并合并到main.min.js. 但是在缩小之后，所有的async修饰符都从结果脚本中删除了。

功能如

async function foo() {
  await /* some promise */;
}

已经变成：

function foo() {await /*some promise*/;}

如何避免删除async修饰符？

我正在尝试构建微前端生态系统。有许多团队开发不同的组件，使应用程序在单页中作为单页应用程序一起工作。所有组件都应该独立构建和部署，并且应该在单个 HTML 页面中引用，以便通过在运行时解析来开始协同工作。例如，在生产中，我们应该在 html 页面中有以下脚本文件：

<script src="http://deploy-server/external/vendor1.js" />
<script src="http://deploy-server/external/vendor2.js" />
<script src="http://deploy-server/external/vendor3.js" />
<script src="http://deploy-server/internal/comp1.js" />
<script src="http://deploy-server/internal/comp2.js" />
<script src="http://deploy-server/internal/comp3.js" />

现在，下面将是包的详细信息：

vendor1 -> Reactjs, react-dom, react-router (most used lib for making react eco-system, Used by all internal component scripts)
vendor2.js -> react-datepicker, lodash, (libraires used by comp2.js)
vendor3.js -> Used by comp3.js

comp1.js,comp2.js,comp3.js -> 使用 vendor1.js 并且将来可能正在使用或可能开始使用 vendor2 和 vendor3 js 模块。

如何分别捆绑外部供应商文件和内部库，同时希望使用它们在不同团队之间共享以进行开发。假设我已经捆绑了 vendor1.js，它应该如何用于开发和构建 comp3、comp4、....？

我尝试使用“共享”构建 vendor1.js，但是当使用 comp2.js 引用它时，出现运行时错误。

编辑：添加代码我尝试共享供应商文件不同的团队，我在 app1 中创建了供应商文件，具有以下 webpack.config.js

   entry: {
      home: { …

背景

我正在尝试创建一个“无构建”JavaScript 应用程序，在该应用程序中，每次保存任何源文件时，我都不需要watch运行任务来转译 JSX、重新捆绑代码等。

它仅适用于第一方代码，但当我尝试import从 npm 获取依赖项时，我陷入了困境。

目标

我想实现这样的工作流程：

1. npm install foo（假设它是一个 ES 模块，而不是 CommonJS）
2. 编辑source/index.js并添加import { bar } from 'foo'
3. npm run build。某些东西（webpack，rollup，自定义脚本，等等）运行，并将foo其捆绑及其依赖项./build/vendor.js（没有来自 的任何内容source/）。
4. 编辑index.html添加<script src="build/vendor.js" type="module"...
5. 我可以source/index.js在浏览器中重新加载，然后bar就可以使用了。npm run build直到下次添加/删除依赖项时我才必须运行。

我已经让 webpack 将依赖项拆分为一个单独的文件，但要import在无构建上下文中从该文件中，我必须import { bar } from './build/vendor.js. 那时 webpack 将不再捆绑bar，因为它不是相对导入。

我也尝试过Snowpack，它在概念上更接近我想要的，但我仍然无法配置它来实现上述工作流程。

我可以编写一个简单的脚本来将文件从node_modulesto复制 …

我正在迁移到 Bootstrap 5.0.2 并清理捆绑以进行优化。由于对各种旧浏览器版本的支持已被弃用，并且 Modernizr.js 自 2017 年以来就没有更新过，这一行是否仍然有必要？

@Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" async></script>", "~/bundles/modernizr")

这个问题似乎或多或少与这个问题重复，但那个问题没有收到答案，而且已经有两年多了，所以我不知道协议是什么（我试图找出答案）。

不管怎样，我已经编写了一个 ASP.NET MVC5 Web 应用程序，并且在调试中一切正常。使用发布配置发布到服务器后，我开始看到错误“未捕获的引用错误：初始化之前无法访问'n'”。

经过几个小时的代码搜索后，我想我已经隔离了这个问题。我有这个小函数（它是一个 Knockout 视图模型，但这无关紧要）：

eventIndexViewModel = function (params) {
    let self = this;

    // Map values from params object to properties of self
    for (const [key, value] of Object.entries(params)) {
        self['_' + key] = value;
    }

    self.eventsView = ko.observable(self._eventsView);
    self.calendarToggleButtonClass = ko.pureComputed(function () {
        return self.eventsView() === "calendar" ? "active" : "";
    });
    self.tableToggleButtonClass = ko.pureComputed(function () {
        return self.eventsView() === "table" ? "active" : "";
    });
};

缩小并发布到服务器后，如果我在开发工具控制台中查看源代码，它看起来像这样：

eventIndexViewModel = …

当我部署一个网站（具有多个入口点、许多 HTML 文件）并且主机使用构建命令：parcel build index.html aboutme.html. 部署的网站给我一个 404 错误。但如果我在 URL /aboutme.html 或 /index.html 中写入，就会出现...这就像一个路由问题。

HTTP://localhost:1234 => 404 错误，
HTTP://localhost:1234/aboutme.html => 正常。

有 1 个入口点，一切正常，但我想要多个 HTML 文件。

我搜索过在线命令，例如：

"build:client": "parcel build client/index.html --out-dir dist/client",

或者

 "build:server": "parcel build server/index.js --target node --out-dir dist/server",

甚至更多使用这个奇怪的标志命令：--watch