Skip to content

Instantly share code, notes, and snippets.

@thisconnect
Last active February 7, 2016 16:07
Show Gist options
  • Save thisconnect/af9c83ed56e9d554f63b to your computer and use it in GitHub Desktop.
Save thisconnect/af9c83ed56e9d554f63b to your computer and use it in GitHub Desktop.
Build redux with rollup, download, `npm i && npm start`
<!doctype html>
<meta charset="utf-8">
<title>fromcjs</title>
<script src="fromcjs.iife.js"></script>
const redux = require('redux')
const counter = function(state, action){
if (state == null) state = 0;
switch (action.type){
case 'INCREMENT':
return state + 1;
default:
return state;
}
};
const store = redux.createStore(counter);
console.log(store.getState());
store.subscribe(function(){
console.log('something changed');
});
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState());
import npm from 'rollup-plugin-npm';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';
export default {
entry: 'fromcjs.js',
plugins: [
npm({ jsnext: false, main: true }),
commonjs(),
replace({ 'process.env.NODE_ENV': JSON.stringify('production') })
],
format: 'iife',
dest: 'fromcjs.iife.js',
moduleName: 'myApp'
};
<!doctype html>
<meta charset="utf-8">
<title>main</title>
<script src="main.iife.js"></script>
import { createStore } from 'redux';
const counter = (state = 0, action) => {
switch (action.type){
case 'INCREMENT':
return state + 1;
default:
return state;
}
}
const store = createStore(counter);
console.log(store.getState());
store.subscribe(() => {
console.log('something changed');
});
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState());
import npm from 'rollup-plugin-npm';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';
import babel from 'rollup-plugin-babel';
export default {
entry: 'main.js',
plugins: [
npm({ jsnext: true, main: false }),
// commonjs(), // not needed with Redux ^3.3.1
replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
babel({
babelrc: false,
presets: ['es2015-rollup', 'stage-0'] // stage-1 or stage-2 seems to be ok
})
],
format: 'iife',
dest: 'main.iife.js',
moduleName: 'myApp'
};
{
"name": "build-redux",
"version": "1.0.0",
"description": "",
"private": true,
"dependencies": {
"redux": "^3.3.1"
},
"devDependencies": {
"babel-preset-es2015-rollup": "^1.1.1",
"babel-preset-stage-0": "^6.3.13",
"rollup": "^0.25.2",
"rollup-plugin-babel": "^2.3.9",
"rollup-plugin-commonjs": "^2.2.1",
"rollup-plugin-npm": "^1.4.0",
"rollup-plugin-replace": "^1.1.0",
"uglify-js": "^2.6.1"
},
"scripts": {
"start": "npm run main && npm run fromcjs",
"main": "rollup -c main.rollup.js",
"fromcjs": "rollup -c fromcjs.rollup.js",
"postmain": "uglifyjs main.iife.js --compress --mangle -o main.iife.min.js",
"postfromcjs": "uglifyjs fromcjs.iife.js --compress --mangle -o fromcjs.iife.min.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Enrique Erne",
"license": "MIT"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment