I need to use the version attribute of my package.json in one of it's scripts to put the version in the name of the JS bundle (i prefer to use the version as a unique identifier instead of a hash).
what i have:
"build-js": "browserify -t [ babelify --presets [ react es2015 ] ] js/components/App.js -o js/bundle.js"
what i need (i know it doesn't parse, but you get the idea):
"build-js": "browserify -t [ babelify --presets [ react es2015 ] ] js/components/App.js -o js/bundle."+this.version+".js"
When you run an npm script, npm will set all the package.json fields as environment variables that you can use:
https://docs.npmjs.com/misc/scripts#packagejson-vars
you can use the npm_package_version environment variable
You can do this with:
"build-js": "browserify -t [ babelify --presets [ react es2015 ] ] js/components/App.js -o js/bundle.$npm_package_version.js"
See this video for more details: https://egghead.io/lessons/tools-use-custom-config-settings-in-your-npm-scripts
P.S. It's worth not putting your bundle in the same directory as your source, usually it goes into dist/, e.g. dist/bundle.js. This way if you are publishing to npm you can ignore the unbuilt source directory. Or you can just remove the dist/ dir and rebuild, plus in the future you'll want other assets in dist as part of your build process.
Related
Our node environment requires that our JavaScript files be babeled. This is easy enough.
The difficult part is that we have .js, .jsx, .ts, .tsx files and this won't change.
Is there anything I could do to get the TypeScript files converted into JavaScript, and then have all the .js/.jsx files go through babel?
My current command:
nodemon app.js --exec babel-node --presets env,stage-2,react
I know that I need TypeScript to be converted somewhere in there.
Any ideas?
Node version: 8.11.1
With babel 7 you can use the typescript preset. You still need typescript to do the actual type checking, just the compilation to js will now be done by babel.
Here's what a simple setup might look like:
npm install --save-dev #babel/preset-typescript
Update the rest of the toolchain to babel 7 too (e.g. babel-cli to #babel/cli #babel/core, babel-preset-env to #babel/preset-env etc.)
Add "noEmit": true to your tsconfig.json. This ensures typescript only does type checking and doesn't output js.
Add --extensions '.js,.jsx,.ts,.tsx' to your command.
So your command becomes:
nodemon app.js --exec babel-node --presets #babel/env,#babel/stage-2,#babel/react,#babel/typescript --extensions '.js,.jsx,.ts,.tsx'
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
I have a Node app using ES6 that I run with the following command nodemon cluster.js --exec babel-node.
I also have a .babelrc file :
{
"presets": ["es2015"],
"ignore": [
"public"
]
}
The folder public contains front-end files such as html, css and js. But when I edit a JS file within the public folder, babel-node compiles my code and I don't want this to happen.
I think it's related to this bug. Try using nodemon cluster.js --exec "babel-node --ignore public".
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 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