ES2015 it's awesome and babel.js is a great tool for compiling ES2015 into
javascript code. If you take a look at babel's documentation, you'll find out
over than 20 different ways to install babel.js from node to .NET.
One of the greatets features in ES2015 is import and export but you can't
use it in the browser :( right out of the box.
If you want to use modules in the browser you will need to do a trick and use
browserify + babelify.
First of all you have to make sure you have latest nodejs version running in
your machine. You can make sure by running node -v; npm -v. If you don't
have nodejs installed already then you might want to go to
nodejs.org. Then you will need to install
gulp-cli by typing.
npm install -g gulp-cli
Now lets create a package.json file. echo '{}' > package.json and install
the proyect dependencies.
npm install --save-dev babel-core babel-preset-es2015 babelify bower browser-sync browserify del gulp gulp-browserify gulp-uglify vinyl-source-stream
Your gulpfile.babel.js needs to look like this.
import babelify from 'babelify';
import browserSync from 'browser-sync';
import browserify from 'browserify';
import del from 'del';
import gulp from 'gulp';
import source from 'vinyl-source-stream';
import uglify from 'gulp-uglify';
gulp.task('build', ['browserify', 'uglify']);
gulp.task('clean:dist', del.bind(null, ['dist']));
gulp.task('clean:tmp', del.bind(null, ['.tmp']));
gulp.task('default', ['build']);
gulp.task('reload', ['clean:tmp', 'browserify'], browserSync.reload);
gulp.task('serve', ['watch', 'clean:tmp', 'browserify', 'browsersync']);
const _browserify = function(src, name, dest) {
browserify({entries: src, debug: true})
.transform(babelify)
.bundle()
.pipe(source(name))
.pipe(gulp.dest(dest));
};
gulp.task('browserify', ['clean:tmp'], () => {
_browserify('scripts/main.js', 'app.js', '.tmp/scripts');
_browserify('spec/main.js', 'tests.js', '.tmp/spec');
});
gulp.task('watch', () => {
gulp.watch('scripts/*.js', ['reload']);
gulp.watch('spec/*.js', ['reload']);
});
gulp.task('uglify', () => {
gulp.src('.tmp/scripts/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'));
});
gulp.task('browsersync', ['clean:tmp'], () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: 'spec',
routes: {
'/scripts': '.tmp/scripts',
'/spec': '.tmp/spec',
'/bower_components': 'bower_components'
}
}
});
});Create your working directories.
echo '{"presets": ["es2015"]}' > .babelrc
mkdir -p spec
mkdir -p scripts
touch spec/main.js
echo 'window.MyApp = {};' > scripts/main.js
Create your first assetion. spec/main.js
describe('Give it some context', () => {
it('should run here few assertions', () => {
expect(MyApp).toBeDefined();
});
});Install bower packages.
./node_modules/.bin/bower init
./node_modules/.bin/bower install --save-dev jasmine-core
Create a jasmine runner file
touch spec/index.html
Your file needs to look like this.
<!doctype html>
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="stylesheet" href="bower_components/jasmine-core/lib/jasmine-core/jasmine.css">
</head>
<body>
<script src="bower_components/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="bower_components/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="bower_components/jasmine-core/lib/jasmine-core/boot.js"></script>
<script src="scripts/app.js"></script>
<script src="spec/tests.js"></script>
</body>
</html>And now you can just run gulp serve for a BDD server or gulp for a distribudable file.
So now you can do crazy module programing for the browser :3
main.js example
import MyModule from './my_module';scripts/my_module.js
export default class MyModule {
constructor() {
document.addEventListener("DOMContentLoaded", (event) => {
console.log('yay');
});
}
}I hope you can enjoy it :)