How to uglify bootstrap (ES6)

I am trying to use bootstrap partly

global.Tether = require('tether');
global.Popper = require('popper.js/dist/umd/popper');
require('bootstrap/js/src/modal');

, but I alway get

test.js from UglifyJs Unexpected token: operator (>) [test.js:1722,20]

in production mode. Dev mode is fine.

I added the following to activate ES6:

package.json

"devDependencies": {
  ...  
  "uglify-js": "https://github.com/mishoo/UglifyJS2#harmony-v2.8.22",
  "uglifyjs-webpack-plugin": "^0.4.6"
}

webpack.config.js

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
...
.addPlugin(new webpack.ProvidePlugin(new UglifyJSPlugin()))

But there is no effecft. Still the same error. Any ideas?

[Lyrkan]

Hi @wenmingtang,

Are you trying to transpile your code with ES6 as a target or are you requiring files from a vendor that are written using ES6?

In the first case you can try using the 1.0.0-beta version of uglifyjs-plugin:

• add it to your project using yarn: yarn add --dev uglifyjs-webpack-plugin@^1.0.0-beta
• replace the version from webpack by that one in your webpack.config.js:

const Encore = require('@symfony/webpack-encore');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// Configure Encore
Encore
    .setOutputPath('build/')
    .setPublicPath('/')
    // (...)
;

const webpackConfig = Encore.getWebpackConfig();

// Remove the old version first
webpackConfig.plugins = webpackConfig.plugins.filter(
    plugin => !(plugin instanceof webpack.optimize.UglifyJsPlugin)
);

// Add the new one
webpackConfig.plugins.push(new UglifyJsPlugin());

// export the final configuration
module.exports = webpackConfig;

In the other case try looking for an already transpiled version of the files you are requiring. If you can’t find one the best way right now would probably be to manually modify the exclude option of the babel-loader as stated above.

[Lyrkan]

So, looking back at it a bit more, the version of Webpack shipped with Encore currently installs uglifyjs-webpack-plugin v0.4.6 which uses uglify-js v2.8.29. This version of uglify-js doesn’t support ES6 and, since vendors don’t go through Babel it fails if you require something from them written using ES6. It works using the files in dist since they have already been processed by Babel using the ES2015 preset.

I guess you could do what you were initially trying to and modify the uglify-js part in order to use a more recent version such as uglify-es (you’ll probably need to remove the plugin added by Encore before adding yours though) but be aware than the resulting file may include things that are not supported by some browsers.

If you really want to import the src files you could modify the js rule added by Encore in order to remove the exclude: /(node_modules|bower_components)/:

const config = Encore.getWebpackConfig();

for (const rule of config.module.rules) {
    if (rule.use) {
        for (loader of rule.use) {
            if (loader.loader === 'babel-loader') {
                delete rule.exclude;
            }
        }
    }
}

module.exports = config;

Since Babel will then use the .babelrc file from Bootstrap you’ll also need to yarn add --dev babel-preset-es2015 transform-es2015-modules-strip.

Edit: Be aware that this last method will slow down your builds and that if another module also uses a .babelrc file you’ll also need to add the presets/plugins it uses (or disable .babelrc files). In my opinion you should use the dist files whenever it’s possible to do so, and when it isn’t slightly modify the exclude rule to add an exception instead of removing it entirely.