标签: uglifyjs

我正在尝试使源图在我使用Grunt和UglifyJS Grunt任务时发挥出色.

这是当前的任务:

uglify: {
  dist: {
    options: {
      sourceMap: function(path) {
        return path + ".map";
      },
    },
    files: {
      'dist/video.min.js': [ 'javascripts/video.js' ]
    }
  }
}

有什么问题？

生成了源地图,但Chrome正在错误的位置搜索源地图(即dist/dist/video.min.js.map).我知道这是因为我在控制台中得到404.

所以我编辑dist/video.min.js并改为sourceMappingURL指向正确的位置.现在,源图已加载,但正在寻找完全错误的地方的video.js :( dist/javascripts/video.js那又是dist!)

所以基本上现在我没有任何想法,只是戳了gruntfile没有运气.

有任何想法吗？谢谢!

是否可以指定我想要压缩和损坏的文件和数组(默认的Uglify行为),还有一个不应该被触及的文件列表,只是连接？

谢谢.

一旦js应用程序(由许多单独的模块构成)得到优化(使用Requirejs优化工具将整个代码放入一个单独的文件中); 是否有可能将文件反编译/取消合并为独立的模块,就像以前在优化之前一样？

用例将是一个场景(即使很难发生)你丢失源代码但可以访问优化的js文件..是否有任何方法/方法将模块自动分成js文件而不是手动做吗？

我在生产中有一个最小化的文件,有一个记录错误的错误处理程序,以及在我缩小文件时生成的源映射,但是我无法将错误映射到我的源文件,因为错误是在日志中并且不会出现在chrome或firefox中,其中很容易消耗缩小的文件和源图.是否有应用程序或工具将使用我生成的源地图将缩小文件中的错误报告转换为原始未分类文件中的位置？所以我要完全清楚

dist.min.js

它由几个js文件组成,然后用uglify.js缩小.我有

dist.min.js.map

这是uglify缩小文件时生成的mapfile.我需要做的是接受错误

ERROR: Uncaught TypeError: Cannot call method 'indexOf' of undefined, dist.min.js:1 "TypeError: Cannot call method 'indexOf' of undefined at distmin.js:1:21815 at ab.event.dispatch (dist.min.js:3:25564) at q.handle (dist.min.js:3:22314)"

并找出我的原始源代码中实际发生错误的位置.我知道如何在Chrome中使用源图,但是是否有一个外部工具可以让我手动输入行和列并显示源代码中的位置？

我希望sbt设置在development(sbt run)中运行时具有与生产(sbt dist/ sbt start)不同的值.

具体来说我使用的是sbt-uglify.我在开发中使用它将javascript资产连接到一个文件中.我在开发中禁用了压缩和修改,因为它使代码更难调试.

在生产中,我想使用压缩来删除调试代码块(if (DEBUG) { ... }),这可能是使用uglifyjs的死代码删除功能.

我希望这可行:

// "in Assets" to use uglify in dev & prod
pipelineStages in Assets := Seq(uglify)

// enable compression and mangling in prod
UglifyKeys.compress := true
UglifyKeys.mangle := true

// disable in development (DOESN'T WORK! Values are always true)
UglifyKeys.compress in Assets := false
UglifyKeys.mangle in Assets := false

我安装了以下模块：

• 巴别化
• babel-preset-es2015
• 浏览器化
• 丑化

现在我有一个server.js包含 ES6 javascript的核心文件。我可以将 ES6 转换为 ES5 并使用以下命令为浏览器捆绑代码：

browserify server.js -o ./public/bundle.js -t [ babelify --presets [es2015] ]

但现在我想uglifyify 缩小代码并添加源映射。我无法让它工作，我只是无法计算出正确的命令。我尝试了以下方法：

browserify server.js -t uglifyify -t [ babelify --presets [es2015] ] -o ./public/bundle.js

browserify server.js -o ./public/bundle.js -t [ uglifyify, babelify --presets [es2015] ]

browserify server.js uglifyify -o ./public/bundle.js -t [ babelify --presets [es2015] ]

即使没有 babel：

browserify server.js -o ./public/bundle.js -t uglifyify
browserify server.js -t uglifyify -o ./public/bundle.js

使用 UglifyJS 时，函数名称会被修改，除非keep_fnames设置为true. 例如，以下打字稿代码：

class Test {}
console.log(Test.name);

编译成JS：

function Test() {}
console.log(Test.name);

将被丑化为：

function t() {}
console.log(t.name);

并输出t而不是test到控制台。

有没有办法（除了使用keep_fnames选项）name在丑化后保留财产？（我不想使用，keep_fnames:true因为它会大大增加捆绑包的大小。

我想到的可能解决方案：

• 编写一个硬编码函数 name 的 Webpack 插件Test.name = 'Test'，但这不会像Function.prototype.name只读属性那样工作；
• 使用 Typescript 装饰器、元数据和反射 API，但design:type元数据不是为类发出的，它只为属性发出（我相信这是因为Function.prototype.name存在，但我猜他们错过了这个边缘情况？）。

运行以下命令时：

echo "let demo = 3; console.log(demo);" | uglifyjs --compress --mangle

我期望以下输出：

let a=3;console.log(a);

相反，我得到：

let demo=3;console.log(demo);

因此，我不明白如何使用--mangle选项。官方文档说明了如何排除不应修改的名称，如何修改属性等，但是如何仅转换普通变量的名称呢？

还是此选项做的事情完全不同，我误解了它的目的？

注意：我使用的是uglify-es 3.2.2。

在使用继承缩小/丑化ES6代码时,Webpack删除了类名:

我们尝试缩小/ uglify的MVCE代码:

班级儿童:

const ParentClass = require('parent');

class Child extends ParentClass{
    constructor(){
        super();
    }
}

module.exports = Child;

index.js调用Child类:

const Child = require('./classes_so/child');

let child = new Child();

console.log(child.constructor.name);

模块父内部node_modules:

class Parent {
    constructor() {
        if (this.constructor.name === 'Parent'){
            throw new TypeError("Parent class is abstract - cant be instance");
        }
    }

}

module.exports = Parent;

整个输出我会后的问题结束,在这里我要发布唯一相关的线,我认为会导致错误的行为(由原来的输出线33-37):

n.exports = class extends r {
        constructor() {
            super();
        }
    }; …

我创建了一个带有自定义下一个服务器的 React 应用程序

服务器.js：

const { createServer } = require('http');
const next = require('next');
const app = next({
  dev: process.env.NODE_ENV !== 'production',
  conf: {
  webpack: config => {
    config.devtool = false;
    for (const r of config.module.rules) {
      if (r.loader === 'babel-loader') {
        r.options.sourceMaps = false;
      }
    }
    return config;
  }
}
});
const routes = require('./routes');
const handler = routes.getRequestHandler(app);
app.prepare().then(() => {
   createServer(handler).listen(3000, err => {
    if (err) throw err;
   });
});

但是，我遇到npm run build问题，因为我收到以下错误 …