Quasar minification with babili?

krsyoung

Hey,

Just checking if anybody has tried making use of Babili for minification? I have an app that is (trying to) using OCR via tesseract.js. Works ok except I think the tesseract.js code is ES6 and blows up the default Quasar Webpack UglifyJS step.

Babili seems to be a possible way to get around this except it is super slow and seems to produce output that doesn’t actually run (but no errors!).

Just checking if anybody else has experience with this / has had luck when importing modules that won’t process with UglifyJS.

Thanks!

rstoenescu

@krsyoung hi, you are looking at this the wrong way. Try adding an exception for babel loader to parse tesseract instead. It will transpile ES6 to ES5, like Babili. Or look at their npm package and see if they already have a transpiled file that you can load. Good luck!

krsyoung

Thanks @rstoenescu, I think this helps me get in a better direction. I guess it might not even be my problem in this case as I tried to transpile from ES6 to ES5 with babel directly and kept getting the same error.

For reference I did get around the problem by including the code directly in a lib folder in my project (after disabling eslint: /* eslint-disable */):

babel node_modules/tesseract.js/dist/tesseract.js --out-file src/lib/tesseract.js
babel node_modules/tesseract.js/dist/worker.js --out-file src/lib/worker.js

Which doesn’t even change the code area that is causing errors with UglifyJS:

# before transpile
im.onload = function (e) {
  return loadImage(im, cb);
};

# after transpile
im.onload = function (e) {
  return loadImage(im, cb);
};

Here was the original error for other’s reference (must be some other build step that makes the change that causes UglifyJS to tank):

# ERROR in js/9.46b186ac762152eeee38.js from UglifyJs
# Unexpected token: operator (>) [js/9.46b186ac762152eeee38.js:197,27]
im.onload = e => loadImage(im, cb);

Will keep investigating as I’d rather not need to include the source directly.

rstoenescu

Use exceptions in /build/webpack.base.conf.js… look for:

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: projectRoot,
        exclude: /node_modules/
      },

and change accordingly, rather than using babel cli. Ultimately, as the tesseract guys for a transpiled version. After all, this is what a good npm package must contain.

pd76

I replaced UglifyJS with babel-minify (babili new name) without issues so far; I’m new in this kind of stuff, please tell if you see something wrong with that.

In /project/build/webpack.prod.conf.js comment the new webpack.optimize.UglifyJsPlugin({ block.

To use minify add this code under the plugins section

new MinifyPlugin({},
    {
      sourceMap: config.build.productionSourceMap
}),

Add this import:

MinifyPlugin = require("babel-minify-webpack-plugin");

Installation:

npm install babel-minify --save-dev

No More Posting New Topics!

Quasar minification with babili?