- Keep your old code exactly as-is.
- Keep writing ES5.
- Add JSPM (+Babel +SystemJS) to your project
- Skip using JSPM for dependency management for now. Stick to what you're already doing.
- Get the tiniest possible ES6+ snippet working alongside your existing code
- Begin using ES6 modules to wire up new components that you write
- Slowly introduce new ES6+ syntax that you are comfortable with, verify the ES5 output
- Expand ES6+ usage
- Read: http://exploringjs.com/es6/
- Reference: http://speakingjs.com/es5/
- Verify: http://kangax.github.io/compat-table/
- Migrate: https://leanpub.com/setting-up-es6/
- Lint: http://eslint.org/
- Be stylish: https://github.com/airbnb/javascript
- Transpile: https://babeljs.io/
- Package: http://jspm.io/
mkdir greener && cd greener
npm init -y
npm install --save-dev jspm@beta static-server
./node_modules/.bin/jspm init -y
mkdir -p src
cat <<EOF > run.js
// App runner
import greener from 'greener'
greener.run()
EOF
cat <<EOF > src/lib.js
// Put your existing global dependencies here -
// Only place that should reference global scope
export const \$ = window.\$
EOF
cat <<EOF > src/greener.js
// Main app
import changeBackground from './changeBackground.js'
export default { run }
function run() {
changeBackground('#006000')
}
EOF
cat <<EOF > src/changeBackground.js
// App function
import { \$ } from './lib.js'
export default function changeBackground(colour) {
\$('body').css('background-color', colour)
}
EOF
cat <<EOF > index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="jspm_packages/system.js"></script>
<script src="jspm.config.js"></script>
</head>
<body>
<script>
SystemJS.import('run.js');
</script>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
</body>
</html>
EOF
./node_modules/.bin/static-server
open "http://localhost:9080"