Thursday 4 May 2017

Vueify Envify Babelify Uglify

Is this the way to get a Vue js Browserify build into production? If not, could you recommend and illustrate a better series of build tasks? If so, could you provide the script command to accomplish it?

My local build commands are:

"watch": "watchify -t vueify -e src/main.js -o dist/js/build.js",
"build": "browserify -t vueify -e src/main.js -o dist/js/build.js"

Setting

process.env.NODE_ENV = 'production';

in main.js gets rid of the dev tools spitting out in the command line, but the script is not minified. Also, I see the Vueify build is creating ES6, and I guess I need to transpile.

The Vue docs advise applying a global Envify with

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

The Envify docs advise this commmand:

browserify index.js -t [ envify --NODE_ENV production  ] > bundle.js

Vueify (which is great by the way) doesn't say much.

The recommended Envify in turn recommends UglifyJS, which provides the command

uglifyjs [ options... ] [ filename ]

I guess that would be piped somewhere in the process, as is shown in the envify example above.

I also guess Babel needs to transpile this stream somewhere. The docs advise this command:

browserify script.js -t babelify --outfile bundle.js

I haven't been able to put this together into a workable build process for production. The CLI errors I'm getting are too cryptic for me and they aren't providing line numbers.

How can I put all of this together to create a production build for a Vue project that uses Browserify and Vueify?



via Harold

No comments:

Post a Comment