标签: bundling-and-minification

我使用ASP.NET的捆绑和缩小功能设置了一个简单的测试.我有两个非常简单的js文件:

〜/ JS/Site.js

(function echo1() {
    alert("this is site.js");
})();

〜/ JS/test.js

(function echo2(value) {
    alert("and this is test.js");
})();

我创建了一个包如下:

bundles.Add(new ScriptBundle("~/bundles/scripts/site-globals").Include(
    "~/JS/Site.js", 
    "~/JS/test.js"));

并使用.引用页面上的包 @Scripts.Render("~/bundles/scripts/site-globals")

当我在调试下运行该站点(<compilation debug="true" targetFramework="4.5" />在web.config中)时,我得到了预期的结果 - 两个警告框一个接一个地显示.

但是,当我将更改运行到release(<compilation debug="false" targetFramework="4.5" />)时 - 我只看到第一个警告框,并且发送到浏览器的组合JS文件完全忽略了test.js的内容.

"合并和缩小"输出如下所示,错误地仅包含来自Site.js的代码:

(function(){alert("this is site.js")})()

关于为什么会发生这种情况的任何想法都将非常感谢!谢谢

我正在将 ASP.NET 捆绑移动到我拥有的站点中，我注意到它正在删除代码中的所有注释，包括版权标题注释（在 CSS 和 JavaScript 中）。如果这是我的版权就可以了，因为我可以创建自己的IBundleTransform版权并将我的版权添加到顶部，但是使用第三方版权来做到这一点并不理想。

有什么好的方法可以保留这些版权标头（或者可能是我在 MSDN 文档中没有找到的标志）？谢谢！

我们正在创建一个构建过程来缩小和连接我们所有的文件.

不幸的是,CKEditor的负载config.js和styles.js本身.我想将所有这些文件连接在一起,以便只有1个http请求.

作为测试,我尝试使用下载中的文件创建一个包含ckeditor.js并config.js组合在一起的文件basic.

不幸的是,似乎ckeditor仍然会继续尝试加载config.js.

但是,如果我使用ckeditor.jsckeditor托管,似乎只有1个请求:http://jsfiddle.net/jdPn3/

在上述情况下,config.js和styles.js不出现被加载.

他们是如何进行连接的？

我正在研究我们的 ASP.NET WebForms 项目，并尝试进行YSlow等工具建议的更改。我们对添加到项目中的文件使用 .NET 4.0 附带的内置捆绑和缩小，但仍有一些 JavaScript 文件被 WebForms 框架包含在未缩小的范围内：ScriptResource.axd和WebResource.axd

我环顾四周，找到了很多关于如何缩小这些文件的 3rd 方解决方案，但是所有这些解决方案在框架中内置 JS 压缩器之前已经有几年的历史了。现在它是内置的，似乎应该可以以某种方式利用它。

我怎样才能让这些*.axd文件有一个缩小的输出？

当我尝试渲染缩小的TinyMCE包时,Internet Explorer很合适.因此,为了创建一个避免缩小的包,我按照这些说明在BundleConfig中设置了"通用"或"基本"包:

bundles.Add( new Bundle( "~/Scripts/tinymce" )
                 .Include( "~/Scripts/tinymce/tinymce.min.js",
                            "~/Scripts/tinymce/jquery.tinymce.min.js" ) );

如何在页面上呈现此内容？以下所有内容似乎都不起作用:

@Bundles.Render( "~/Scripts/tinymce" )
@Bundle.Render( "~/Scripts/tinymce" )
@Bundle( "~/Scripts/tinymce" )

这至少呈现标记:

@Scripts.Render( "~/Scripts/tinymce" )

但它在尝试加载文件时抛出403错误:

"NetworkError: 403 Forbidden - http://localhost:1062/Scripts/tinymce/?v=MTojK5ORvAZmonNqNGJ3aWhOYyor-Fa8dZHTqfSOlUM1"

我正在尝试为我的项目设置webpack.该项目足够大,并以多种语言提供.我希望每种语言的每个入口点都作为单独的文件提供.我的语言文件不仅仅是简单的JSON,而是JavaScript.所以i18n插件不符合我的需求.

该解决方案似乎与i18n插件类似:

var languages = ['en', 'fr', 'de'];
module.exports = languages.map(function (lang) {
  return {
    name: lang,
    // some other language-dependent config
  }
})

然后在我的一些脚本中,我想要使用环境变量来定位本地化文件:

var lang = ...; // some environment variable, available only at compile time
var l10n = require('./lang/' + lang);

但是默认情况下,webpack尝试将该表达式存储在括号中,假设稍后在浏览器中对其进行评估.

那么有没有办法告诉webpack立即评估？

或者有人可以更好地解决我的问题？

有没有办法在--production模式下运行时跳过webpack 2中的uglify js插件？

当我尝试在应用程序中使用Ecmascript-6功能时，缩小失败。

如果我尝试使用箭头功能：

$.get('/clients/all').done(response => {
  // Do something with the response
})

我收到以下错误：

/* Minification failed. Returning unminified contents.
(8,45-46): run-time error JS1195: Expected expression: >
(36,6-7): run-time error JS1195: Expected expression: )
(37,1-2): run-time error JS1002: Syntax error: }
 */

以及其他ES6功能。

您知道ES6的ItemTransform吗？

我正在学习一些有关捆绑的知识，因为我正在努力更新一个使用Rollup的小型内部React组件库。

当前状态

现在，所有组件都被捆绑到一个index.js文件中。每当我导入一个或多个...

import { Button, Input } from 'my-library';

...整个库正在导入。我想解决这个问题。

此时，我已经更新了汇总以创建命名的组件文件，因此可以执行如下导入：

import Button from 'my-library/Button';

当我只使用一个组件时，这很好，但是每当我需要一个以上组件时，例如必须从同一库中导入五行，就会感到多余。但是，每当我再次尝试对其进行分解时，整个库都将被导入。

目标

我希望能够从上面运行相同的经过结构分解的import语句，但只能导入这两个组件。

rollup.config

export default {
  experimentalCodeSplitting: true,
  input: [
    'src/index.js',
    'src/components/Button/Button.js',
    'src/components/Input/Input.js',
  ],
  output: {
    exports: 'named',
    dir: 'dist/',
    format: 'cjs',
    chunkFileNames: 'chunks/[name]-[hash].js',
  },
  plugins: [
    external(),
    babel({ exclude: 'node_modules/**', plugins: ['external-helpers'] }),
    resolve(),
    commonjs(),
  ],
};

index.js

import Button from './components/Button/Button';
import Input from './components/Input/Input';

exports.Button = Button;
exports.Input = Input;

因此，这将产生两个文件，Button.js并Input.js为每个组件构建了一个很棒的文件。但是是否有可能在一条import …

据我所知，node_modules中有一堆东西，这些东西最终都在vendor.js我构建Ionic3项目时出现。为了简单起见，可以说我在node_modules中具有以下文件夹：abc，xyz，uvw和qrs。让我们进一步说，abc和xyz是公共库，而uvw和qrs是私有库。因此，我不想以vendor.js包含所有四个库的单个库结束。相反，我想最后得到一个vendor.js包含abc和xyz以及一个private.js包含uvw和qrs的。

如何更改Ionic3项目中的配置文件以实现该结果？理想情况下，我只需要在配置中命名uvw和qrs，并为node_modules中的“其他所有东西”生成vendor.js的默认行为。

更新 作为参考，Ionic 3.9.2使用Webpack 3.10.0，默认的Ionic Webpack配置如下所示。我真的只关心生产构建是否具有上述行为。

/*
 * The webpack config exports an object that has a valid webpack configuration
 * For each environment name. By default, there are two Ionic environments:
 * "dev" and "prod". As such, the webpack.config.js exports a dictionary object
 * with "keys" for "dev" and "prod", where the value is a valid webpack configuration
 * For details on configuring webpack, see their documentation here
 * https://webpack.js.org/configuration/ …