ES6 minify / uglify #2545

damianobarbati · 2016-05-24T21:23:09Z

I'm pretty sure this is a duplicate, but I couldn't find another already open issue about it.

I'd like to not transpile my es6 code with babel to es5 before uglifying it: I'd rather use a minified es6 version of my codebase.
Is there any uglifier production-ready/webpack-ready for this?

Watching in the meantime:
https://gist.github.com/avdg/43002267f959210a69aa3ec0f21ed751

bebraw · 2016-08-14T05:44:09Z

The problem is that UglifyJS doesn't support ES6 yet so it's not possible to avoid that transformation yet. You can follow the progress at mishoo/UglifyJS#448 .

nakamorichi · 2016-08-16T16:11:14Z

Even though ES6 support for UglifyJS is still under development, I would like to know how to force Webpack to use a custom version of UglifyJS, such as the Harmony branch. Is there an easy way to do this with npm?

Btw, this seems to be related to #1471.

bebraw · 2016-08-16T16:29:54Z

I can see two options:

Fork webpack and point uglifyjs dependency to the branch.
Extract the UglifyJs plugin from the project and point that to the branch.

I'm not actually sure why UglifyJS plugin is at the core level as it could easily be a package of its own. Extra dependency to manage then, though.

f0rr0 · 2016-09-03T03:06:51Z

+1 for removing UglifyJS from the core level.

f0rr0 · 2016-09-03T03:36:20Z

@bebraw Or you could use npm shrinkwrap --dev and modify the version to the harmony branch under the webpack dependency in the npm-shrinkwrap.json created. If you still want to keep webpack as dev dependency add npm-shrinkwrap.json to your .gitignore.

bebraw · 2016-09-03T04:07:20Z

FYI, there's a Babel specific minifier these days. See https://github.com/boopathi/babili-webpack-plugin .

f0rr0 · 2016-09-03T06:20:46Z

@bebraw I tried it in my project earlier, it produces unexpected results without any warnings. Same with uglifyjs2 but that happens less often than babili. Someone needs to write a bulletproof es6 minifier

bebraw · 2016-09-03T06:26:30Z

Did you see https://prosecco.surge.sh/ ?

There is not much we can do about this issue in webpack itself.

f0rr0 · 2016-09-03T06:31:45Z

@bebraw This seems very experimental. The gitlab link returns a 404. Totally agree this isn't a webpack concern. Hence the need for removal of uglifyjs from core dependencies

fulls1z3 · 2016-11-26T11:38:51Z

I completely agree with the first solution proposed by @bebraw. I try to help by providing detailed instructions:

Fork webpack,
On that fork, delete all branches except master,
Clone master branch to a local folder,
On the local folder, delete all files,
Commit the empty local folder,
Download the latest release (ex: v2.1.0-beta.27 at the moment)
Extract contents of zip file to the local folder,
On the local folder, edit forked package.json, change

"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"

to point UglifyJs2 (harmony branch) dependency to that branch.

Commit changes,
Finally, point webpack in your package.json to your custom fork:

"webpack": "[USERNAME]/webpack#master"

OR,

Point webpack in your package.json to fulls1z3/webpack (ES6/ES2015 friendly webpack fork):

"webpack": "fulls1z3/webpack#v2.1.0-beta.27-harmony"

mikeerickson · 2017-01-20T19:29:35Z

@bebraw Is this still the case? Is there a way to get this for webpack 2.2.0 final

bebraw · 2017-01-20T19:42:56Z

@mikeerickson I think the instructions above should be valid. The problem is that uglify doesn't support es6 yet and webpack bundles the plugin. So it takes quite a bit of work.

mikeerickson · 2017-01-20T19:48:08Z

@bebraw Which of the two items should be used

First solution, which [USERNAME] should be used
Second solution, which version should be used with fulls1z3/webpack...

bebraw · 2017-01-20T19:55:25Z

@mikeerickson The first sequence is all the steps (forking etc.). The second is just pointing to https://github.com/fulls1z3/webpack, but that seems to be a little out of date already.

mikeerickson · 2017-01-20T20:02:58Z

Ok, I will make it work. Just curious why there is no "official" version of UglifyJs which works with ES6 (harmony) within Webpack. We are well passed the ES5 days :)

nakamorichi · 2017-01-21T08:22:45Z

@mikeerickson I guess that's a question we have to ask from UglifyJS team. Although adding "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony" to my package.json is not a problem, having Git repos as dependencies feels a bit hacky.

bebraw · 2017-01-21T08:27:42Z

What if we did an experimental uglifyjs-webpack-plugin below the webpack-contrib org? I can set up rights etc. if someone is interested. We would basically push the Uglify bits there. It's easier to fork/patch that than webpack.

nakamorichi · 2017-01-21T08:37:34Z

@bebraw You mean extracting lib/optimize/UglifyJsPlugin.js into separate plugin project and removing UglifyJS dependency from Webpack? Or, leaving Webpack as it is and providing users the ability to have UglifyJS plugin that instead depends on the harmony branch?

bebraw · 2017-01-21T08:49:28Z

@bebraw You mean extracting lib/optimize/UglifyJsPlugin.js into separate plugin project and removing UglifyJS dependency from Webpack? Or, leaving Webpack as it is and providing users the ability to have UglifyJS plugin that instead depends on the harmony branch?

lib/optimize/UglifyJsPlugin.js would literally become a project of its own, yeah. This may be a step we might want to take eventually anyway so it could be a nice idea to experiment with it a bit.

I don't mind setting up a little stub project if you are interested.

fulls1z3 · 2017-01-21T09:06:41Z

Hi @bebraw @mikeerickson, the fork I've been built seems a lot of of date. Now the latest version of webpack is 2.2.0, and don't worry I'll update that fork in a few days :)

nakamorichi · 2017-01-21T09:11:08Z

@bebraw That doesn't sound too difficult. Yea, I think I could do it.

nakamorichi · 2017-01-21T09:14:04Z

@fulls1z3 I don't quite understand what you are/were trying to do with that fork. There is no need to fork Webpack in order to use the harmony branch; just add "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony" to your project's package.json, rm -rf node_modules && npm install, and voilà.

fulls1z3 · 2017-01-21T09:16:40Z

@Kitanotori The aim of the fork is just to prevent dependency interference/mismatch (depending on the project structure, dev environment and npm). In other cases I agree with you, and voilà.

bebraw · 2017-01-21T09:53:00Z

@Kitanotori @fulls1z3 I set up a repository. There's a basic demo that works. I didn't port the tests over, though (it's a Jest based setup).

fulls1z3 · 2017-01-21T10:36:20Z

@bebraw seems awesome!
I'll test it and share results with you.

damianobarbati · 2017-01-27T09:47:32Z

@Kitanotori you're right: anyway I expected the ES6-only bundle to me much smaller in size :\

phips28 · 2017-05-09T11:21:31Z

I am using webpack 2.5.1 and "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony",
It worked till 8th may 2017.

Now it fails with the error:

ERROR in express.js from UglifyJs
TypeError: Cannot read property 'reset' of undefined
    at filterdFiles.forEach.err (/Library/WebServer/Documents/dvel/waves-provider/api-provider/node_modules/webpack/lib/optimize/UglifyJsPlugin.js:81:20)
    at Array.forEach (native)
    at Compilation.compilation.plugin (/Library/WebServer/Documents/dvel/waves-provider/api-provider/node_modules/webpack/lib/optimize/UglifyJsPlugin.js:40:18)
    at next (/Library/WebServer/Documents/dvel/waves-provider/api-provider/node_modules/tapable/lib/Tapable.js:140:14)
    at Compilation.compilation.plugin (/Library/WebServer/Documents/dvel/waves-provider/api-provider/node_modules/webpack/lib/BannerPlugin.js:67:5)
    at Compilation.applyPluginsAsyncSeries (/Library/WebServer/Documents/dvel/waves-provider/api-provider/node_modules/tapable/lib/Tapable.js:142:13)
    at self.applyPluginsAsync.err (/Library/WebServer/Documents/dvel/waves-provider/api-provider/node_modules/webpack/lib/Compilation.js:635:10)
    at Compilation.applyPluginsAsyncSeries (/Library/WebServer/Documents/dvel/waves-provider/api-provider/node_modules/tapable/lib/Tapable.js:131:46)
    at sealPart2 (/Library/WebServer/Documents/dvel/waves-provider/api-provider/node_modules/webpack/lib/Compilation.js:631:9)
    at Compilation.applyPluginsAsyncSeries (/Library/WebServer/Documents/dvel/waves-provider/api-provider/node_modules/tapable/lib/Tapable.js:131:46)
    at Compilation.seal (/Library/WebServer/Documents/dvel/waves-provider/api-provider/node_modules/webpack/lib/Compilation.js:579:8)
    at /Library/WebServer/Documents/dvel/waves-provider/api-provider/node_modules/webpack/lib/Compiler.js:493:16
    at /Library/WebServer/Documents/dvel/waves-provider/api-provider/node_modules/tapable/lib/Tapable.js:225:11
    at _addModuleChain (/Library/WebServer/Documents/dvel/waves-provider/api-provider/node_modules/webpack/lib/Compilation.js:481:11)
    at processModuleDependencies.err (/Library/WebServer/Documents/dvel/waves-provider/api-provider/node_modules/webpack/lib/Compilation.js:452:13)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Does anyone has similar error?

aedart · 2017-05-09T12:11:41Z

@phips28 I'm facing the exact same issue - and I have no idea what's causing it :/

ksjogo · 2017-05-10T14:02:04Z

Same here.

nakamorichi · 2017-05-10T14:06:43Z

UglifyJS seems to have bumped to a new major version. Try

"uglify-js": "git://github.com/mishoo/UglifyJS2#harmony-v2.8.22"

phips28 · 2017-05-10T20:14:40Z

@Kitanotori thx for the hint! it works

ksjogo · 2017-05-10T20:18:08Z

It works until I run yarn upgrade which will overwrite it with the 2.8.23 without harmony. Anybody knows a way how to pin the transitive dependencies?

…k with es6 webpack/webpack#2545

nakamorichi · 2017-05-16T00:15:23Z

@ksjogo That's weird. Doesn't happen for me.. Try deleting yarn.lock and node_modules and run yarn again.

ixcat · 2017-05-24T04:42:54Z

Just ran into this and while investigating discovered there is a fork of the harmony branch in NPM which seems to solve my issues ..

$ npm info uglify-js-es6|grep github
url: 'git+https://github.com/paulovieira/UglifyJS2.git' },
bugs: { url: 'https://github.com/mishoo/UglifyJS2/issues' },

patched up my local uglifyjs-webpack-plugin as follows:

$ diff -urw node_modules/uglifyjs-webpack-plugin/dist/in>
--- node_modules/uglifyjs-webpack-plugin/dist/index.js.orig Wed May 24 04:31:46 2017
+++ node_modules/uglifyjs-webpack-plugin/dist/index.js Wed May 24 04:33:14 2017
@@ -16,7 +16,16 @@
var ConcatSource = require("webpack-sources").ConcatSource;
var RequestShortener = require("webpack/lib/RequestShortener");
var ModuleFilenameHelpers = require("webpack/lib/ModuleFilenameHelpers");
-var uglify = require("uglify-js");
+var uglify;
+try {

uglify = require("uglify-js-es6");
+}
+catch (e) {

if (e.code !== 'MODULE_NOT_FOUND') {

throw e;

}

uglify = require("uglify-js");
+}

var UglifyJsPlugin = function () {
function UglifyJsPlugin(options) {

Ideally wouldn't be relying on a fork either, but this IMHO is better than a direct github reference..

webpack/webpack#2545

robwierzbowski · 2017-09-28T03:24:20Z

https://github.com/webpack-contrib/babel-minify-webpack-plugin mentioned in the commit above from @trazyn seems like it has a lot of potential. Tried both beta uglify plugin and the babel plugin on my bundle; I was at 118kb for uglify-es, and 119kb for babel minify.

trazyn · 2017-09-28T03:47:24Z

I have the same trouble with ES6, babel-minify-webpack-plugin is work well with ES6 in my project.

ReeganExE · 2017-10-08T09:21:06Z

Installing "uglifyjs-webpack-plugin": "^1.0.0-beta.2" works for me (with "webpack": "^3.6.0").

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
// ...
plugins: [
  // expose and write the allowed env vars on the compiled bundle
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV)
  }),
  new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false
  }),
  new UglifyJSPlugin({
    uglifyOptions: {
      beautify: false,
      ecma: 6,
      compress: true,
      comments: false
    }
  })
]

demonmind · 2017-10-18T14:14:54Z

i used babel-minify-webpack-plugin and worked well finally

Apidcloud · 2018-02-15T04:04:07Z

In my case, the problem was related to mangling. Setting mangle to false solved it (both uglifyjs-webpack-plugin and babel-minify-webpack-plugin have that option).

xgqfrms · 2018-06-27T07:47:15Z

bug

after minify, it doesn't work. what's wrong with this?

https://github.com/gildata/RAIO/issues/350

online demo

tabs click event binding bug

https://gildata.github.io/ARTC/bugs/index.html

https://gildata.github.io/ARTC/bugs/ok/index.html

webpack/webpack#2545

bebraw added the question label May 25, 2016

bebraw added the X7: waiting on upstream label Aug 14, 2016

bebraw closed this as completed Aug 14, 2016

samhh mentioned this issue Nov 2, 2016

Stop transpiling ES2015/ES6 for modern browser config imperodesign/generator-impero#51

Open

fulls1z3 mentioned this issue May 10, 2017

production build not working fulls1z3/universal#11

Closed

tmyt mentioned this issue May 11, 2017

UglifyJSがこける tmyt/minamo#17

Closed

denis-sokolov added a commit to FormulaMonks/tree-select that referenced this issue May 14, 2017

Disable production configuration of webpack while uglify does not wor…

312ca23

…k with es6 webpack/webpack#2545

sdhicks mentioned this issue May 31, 2017

Error running through UglifyJs Olical/react-faux-dom#96

Closed

AlexanderC mentioned this issue Jun 21, 2017

ERROR in bootstrap.js from UglifyJs Unexpected token: name MitocGroup/deep-microservices-todomvc#123

Closed

Neoglyph mentioned this issue Jun 23, 2017

Unexpected character '`' [./~/vue-bootstrap-pagination/vue-bootstrap-pagination.js:2,0] Media24si/vue-pagination#17

Closed

moozzyk mentioned this issue Aug 21, 2017

Webpack builds signalr-client incorrectly aspnet/SignalR#416

Closed

trazyn added a commit to trazyn/weweChat that referenced this issue Aug 24, 2017

use babel-minify-webpack-plugin minify code

8d09632

webpack/webpack#2545

edouard-lopez mentioned this issue Nov 16, 2017

Unexpected token: name (retryCount) ./node_modules/got/index.js sindresorhus/got#404

Closed

thecreation mentioned this issue Nov 22, 2017

Errors while compiling with webpack thecreation/jquery-wizard#11

Closed

stonebig mentioned this issue Dec 25, 2017

uglify-js is not compatible with es6, and blows up plugin installation jupyterlab/jupyterlab#3486

Closed

mdzzohrabi mentioned this issue Jan 31, 2018

Possibility to disable babel loader symfony/webpack-encore#154

Closed

pdehaan mentioned this issue Apr 17, 2018

Minimize bundle.js payload mozilla/firefox-hardware-report#101

Open

connor11528 mentioned this issue Jun 30, 2018

Webpack simple setup h3xar0n/point-of-vue#7

Merged

Calcaware added a commit to Calcaware/weweChat that referenced this issue Jan 19, 2022

use babel-minify-webpack-plugin minify code

dd0ee54

webpack/webpack#2545

donal-james-collins added a commit to donal-james-collins/weweChat that referenced this issue Mar 3, 2024

use babel-minify-webpack-plugin minify code

abea9a9

webpack/webpack#2545

Uh oh!

ES6 minify / uglify #2545

ES6 minify / uglify #2545

Comments

damianobarbati commented May 24, 2016

bebraw commented Aug 14, 2016

Uh oh!

nakamorichi commented Aug 16, 2016

Uh oh!

bebraw commented Aug 16, 2016

Uh oh!

f0rr0 commented Sep 3, 2016

Uh oh!

f0rr0 commented Sep 3, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bebraw commented Sep 3, 2016

Uh oh!

f0rr0 commented Sep 3, 2016

Uh oh!

bebraw commented Sep 3, 2016

Uh oh!

f0rr0 commented Sep 3, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fulls1z3 commented Nov 26, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mikeerickson commented Jan 20, 2017

Uh oh!

bebraw commented Jan 20, 2017

Uh oh!

mikeerickson commented Jan 20, 2017

Uh oh!

bebraw commented Jan 20, 2017

Uh oh!

mikeerickson commented Jan 20, 2017

Uh oh!

nakamorichi commented Jan 21, 2017

Uh oh!

bebraw commented Jan 21, 2017

Uh oh!

nakamorichi commented Jan 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bebraw commented Jan 21, 2017

Uh oh!

fulls1z3 commented Jan 21, 2017

Uh oh!

nakamorichi commented Jan 21, 2017

Uh oh!

nakamorichi commented Jan 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fulls1z3 commented Jan 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bebraw commented Jan 21, 2017

Uh oh!

fulls1z3 commented Jan 21, 2017

Uh oh!

damianobarbati commented Jan 27, 2017

Uh oh!

phips28 commented May 9, 2017

Uh oh!

aedart commented May 9, 2017

Uh oh!

ksjogo commented May 10, 2017

Uh oh!

nakamorichi commented May 10, 2017

Uh oh!

phips28 commented May 10, 2017

Uh oh!

ksjogo commented May 10, 2017

Uh oh!

nakamorichi commented May 16, 2017

Uh oh!

ixcat commented May 24, 2017

Uh oh!

robwierzbowski commented Sep 28, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

f0rr0 commented Sep 3, 2016 •

edited

Loading

f0rr0 commented Sep 3, 2016 •

edited

Loading

fulls1z3 commented Nov 26, 2016 •

edited

Loading

nakamorichi commented Jan 21, 2017 •

edited

Loading

nakamorichi commented Jan 21, 2017 •

edited

Loading

fulls1z3 commented Jan 21, 2017 •

edited

Loading

robwierzbowski commented Sep 28, 2017 •

edited

Loading

trazyn commented Sep 28, 2017 •

edited

Loading

xgqfrms commented Jun 27, 2018 •

edited

Loading