I am trying to get to grips with browserify and ES6 simultaneously. I have the following basic Node files:
main.js
var foo = require('./foo.js');
var x = foo.math(200);
console.log(x);
foo.js
exports.math = (n)=>{
return n * 111;
};
Now I want to do the following:
Browserify this into a file bundle.js so I can include it as a script in my website
Compile the JS using babel to make the ES6 readable by all browsers
Minify bundle.js to improve load times in the browser
I have browserify installed globally and I run that with this command:
browserify main.js > bundle.js
Works great. But should I be running babel first? How do I complete my 3 step process and in what order (of course minification will have to happen last)? Should I be doing this all with grunt?
It shouldn't be necessary anymore to use a task runner. However, use a neat plugin like babelify from command line as described in its README.md here.
npm install --save-dev browserify babelify babel-preset-es2015
browserify script.js -o bundle.js \
-t [ babelify --presets es2015 ]
And add other transforms as needed from here or any where else, e.g. uglify.
For es6 use uglify-es, it supports ES6.
npm install uglify-es -g
Uglify ES has not been updated in a year and is not maintained and will probably not work. I suggest using Terser with a plugin like uglifyify run the following to install uglifyify
npm i uglifyify
as of 2018 babelify needs #babel/core (babel 7) and a preset like #babel/preset-env
Install them like this:
npm i babelify #babel/core #babel/preset-env
Finally
browserify \
-t [ babelify --presets [[ #babel/preset-env]] \
-g uglifyify main.js > bundle.js
Related
I have node.js script files which I am trying to re-use inside an ASP.NET application on IE 11.
I follow below steps to use them on IE 11:
Create a bundle file using browserify:
browserify Module.js --standalone mymodule -o bundle.js
Convert the ES6 version of bundle.js to ES5 by manually converting it using https://babeljs.io/repl.
Save the converted ES5 script and include the saved .js file as in ASP.NET application.
Is there anyway I can automate step 2? Is there any better way to convert Node.js files to ES5?
Since you use Browserify, you can use Babelify which is a Browserify transform:
npm install --save-dev babelify #babel/core #babel/preset-env
browserify Module.js --standalone mymodule -o bundle.js -t [ babelify --presets [ #babel/preset-env ] ]
See the babel-preset-env documentation to see how to define your target ("ie": 11), by default all ES2015+ syntax will be transformed.
I am looking for a good way to do minification with browserify.
I am developing a react application trying to keep the build setup as simple as possible.
I am using browserify, babelify and watchify.
I do not want to use a task runner like grunt or gulp but just npm in order to keep the setup as simple as possible.
I would like to use the same parameters for browserify (production build) and watchify (during development). The compiled js during development should be exactly the same as in the production build (ie I want minification during development as well. And I want the strongest minification possible with browserify. I know there are other module loaders like rollup or systemjs that achieve even smaller outputs but that's not what I am interested in.
My current watch command looks like this:
watchify src/main.js -t babelify -t envify -o build/bundle.js -v
the corresponding build command looks like this:
browserify src/main.js -t babelify -t envify -o build/bundle.js -v
Note that all the parameters look the same. That's how I want to to be in order to keep the commands in sync in the future.
Now my question is how to add uglification/minification.
I tried adding uglifyify like this: -g [ uglifyify --no-sourcemap ] but there are still a lot of line breaks in the output so I guess it's not fully minified.
I also tried removing the -o parameter and piping the output throught uglifyjs as described here. This produces a smaller output but it does not work for the watchify command.
Take note that uglifyify runs the squeeze transform from uglifyjs but it recommends that you still use uglifyjs on the resulting output.
Uglifyify gives you the benefit of applying Uglify's "squeeze" transform on each file before it's included in the bundle, meaning you can remove dead code paths for conditional requires.
So to change your previous commands to include uglifyjs:
browserify src/main.js -t babelify -t envify -t uglifyify | uglifyjs -cm > build/bundle.min.js
watchify src/main.js -t babelify -t envify -t uglifyify -o 'uglifyjs -cm > build/bundle.min.js' -v
Notes
The --outfile / -o switch on the watchify command is able to accept shell commands as longs as they include a | or > character.
As you pipe the results after the bundle stage, uglifyjs has to work with the file as a whole rather than smaller chunks so you’ll lose some of the speed benefits that watchify provides.
You should not use uglify with watchify, i had lot of trouble using it together (terminal crash, ram eater) until i read that some minify tools are incompatible with it.
You dont need minify files for development, just use watchify for development, and browserify + uglify for production bundle.
Here are some scripts examples for npm to use browserify and watchify with babel:
"scripts" : {
"build": "browserify -t babelify -t uglifyify ./src/app.js -o ./dist/app.min.js",
"watch": "watchify -t babelify ./src/app.js -o ./dist/app.js --debug"
}
also dont forget your .babelrc file on the root of your project then install this:
npm i -S babel-runtime babel-preset-es2015 browserify watchify
using browserify, i can transcompile es6 to es5 by adding this to package.json -> scripts.
How do i do it using webpack and npm script?
"build-modular": "browserify index.js -t babelify -o index-bundle.js"
In webpack instead of transforms you use loaders. Usually you configure loaders in a webpack configuration file. However, you can also bind loaders in the command line.
As you want to babelify your index.js file, you need to install the corresponding babel-loader and the required babel packages:
npm install --save-dev webpack babel-core babel-loader babel-preset-es2015
Now you are able to create your build script entry like this:
"build-modular": "webpack index.js index-bundle.js --module-bind 'js=babel?presets[]=es2015'"
And run it:
npm run build-modular
I have the following modules installed:
babelify
babel-preset-es2015
browserify
uglifyify
Now I have a core file server.js which contains ES6 javascript. I can convert the ES6 to ES5 and bundle the code for browsers with the following command:
browserify server.js -o ./public/bundle.js -t [ babelify --presets [es2015] ]
But now I want to get uglifyify minifying the code and adding a source map. I can't get this working, I just can't work out the correct command. I've tried the following:
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] ]
and even without babel:
browserify server.js -o ./public/bundle.js -t uglifyify
browserify server.js -t uglifyify -o ./public/bundle.js
It's not enough to have uglifyify installed locally - you also need to install uglify-es globaly, since it's used by the uglifyify. You install it like so:
npm i -g uglify-es
Then you use it like so:
browserify server.js -o ./public/bundle.js -t uglifyify
Using it with babelify
If you also need babelify here's how to do it:
browserify server.js -o ./public/bundle.js -t uglifyify -t babelify
Using uglify-es directly
You can also skip using uglifyify altogether by using uglify-es directly like so:
browserify server.js | uglifyjs -c > ./public/bundle.js
The sole purpose of uglifyify is so that uglify-es can be used as a browserify transform.
Perhaps you need to use the Pipe "|" in order to make multiple procedures
Try this:
browserify server.js -t babelify | uglifyjs > public/bundle.js
I hope it helps, otherwise i'll be happy to keep helping you with this issue ;)
Best Regards.
I am starting out with babel.js to make use of JavaScript ES6 features, however I have run in to a problem
I am currently building my app using browserify and reactify with the following command.
browserify -t reactify app/main.js -o public/scripts/bundle.js
Now I want to use an equivalent command in babel to bundle up my required modules, written in ES6 to a bundle.js. This doesn't work, just giving me an ES5 version of the main.js file.
babel app/main.js -o public/scripts/bundle.js
However I could compile my bundle.js file to an ES6 version with babel, having 2 commands
browserify -t reactify app/main.js -o public/scripts/bundle.js
babel app/main.js -o public/scripts/babel.js
Is this the correct way to use babel with browserify? to bundle your modules with browserify and then convert the bundle to ES6?
Nope, the correct way is to use babelify.
# from
browserify -t reactify app/main.js -o public/scripts/bundle.js
# to
browserify -t babelify app/main.js -o public/scripts/bundle.js
Also the reactify/react-tools/jsx-loader/etc. tools from the react team do a subset of what babel does, so you can remove them entirely if you're using babel.