Skip to content

Instantly share code, notes, and snippets.

@worldsayshi
Last active January 5, 2016 17:08
Show Gist options
  • Save worldsayshi/989ff7bae88a33722c8d to your computer and use it in GitHub Desktop.
Save worldsayshi/989ff7bae88a33722c8d to your computer and use it in GitHub Desktop.
Browserify es6 and react example build/watch script.
{
"name": "redux-browserify-es6-example",
"main": "js/index.js",
"scripts": {
"test": "mocha --require babel-core/register",
"test:watch": "npm test -- --watch"
},
"dependencies": {
"expect": "^1.13.4",
"express": "^4.13.3",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.6",
"redux": "^3.0.5",
"redux-thunk": "^1.0.2",
"seamless-immutable": "^4.1.1",
"underscore": "^1.8.3"
},
"devDependencies": {
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babelify": "^7.2.0",
"browserify": "^12.0.1",
"mocha": "^2.3.4",
"watchify": "^3.6.1"
}
}
#!/usr/bin/env node
// package.json is provided as an example to show what deps this example works with
// it includes some additional deps like redux and mocha
// 1. Put es6/react code inn js folder and have index.js as starting point
// 2. Install deps with npm.
// 3. run `$ ./watch.js`
var fs = require("fs");
var browserify = require("browserify");
var watchify = require('watchify');
function log (msg) {
console.log("["+new Date()+"]: "+msg);
}
var b = browserify({
cache: {},
packageCache: {},
plugin: [watchify],
entries: ["./js/index.js"],
debug: true
}).transform("babelify", {
// `stage-2` currently needed for (some uses of?) spread operator
presets: ["es2015", "react", "stage-2"]
}).on('update', bundle)
.on('log', log);
bundle();
function bundle() {
log("creating bundle");
b.bundle((err, buf)=>{
if(err){
console.log(err.message)
return;
}
fs.writeFile("bundle.js",buf);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment