ecma6_boilerplate

ES2015 ( ES6) boilerplate

Follows the newest technology, and uses ES2015 ( ES6) transpillers to let you write tomorrows JavaScript code today.

Features

• Babel ( ES2015 / ES6) transpiller
• Export as ES5 and UMD / AMD
• Karma-Jasmine testing stack
• PhantomJS or a browser of your own choice
• Unit tests that work in Node and in the browser
• headers
• handle nested sub-folders

Supports

• nodeJS v. 10 and v.12
• iojs
• coveralls.io

Gulp tasks

• gulp - Lint the library and tests, then run the unit tests
• gulp build - Lint then build the library
• gulp bump - bump version numbers
• gulp dev - Continuously run the unit tests as you make changes to the source and test files themselves. It also re-compile your build.

Want to use Mocha-Chai-Sinon testing stack instead?

Remove jasmine from package.json and replace the preprocessors in the karma.conf

Coveralls io

This library is set up to integrate with Coveralls io out of the box.

Linting

This boilerplate uses ESLint to lint your source. To change the rules, edit the .eslintrc file in the root directory.

FAQ

How to replace inline code with current version from package.json?

This is not supported simply because people have different needs of what to be replaced inline.

Do I have access to window and document in the test stack?

Yes, you have. Comparing to other boilerplates out there, this one are running phantomJS as default.

There are several options on how you can do this:

1. Add 'window' and 'document' to the Global section in the .eslintrc file, and then:

   /* Globals: window, document */

2. In test cases, use window directly. window.myApp...

How to change from UMD to AMD??

Easy. Edit gulpfile.js file, and change

bundle.toUmd()

to this:

bundle.toAmd()

When should I consider using this boilerplate?

You're authoring a library that exports a single file, and that one file exports a single variable.

What's the browser compatibility?

As a rule of thumb, this transpiler works best in IE9+. You can support IE8 by limiting yourself to a subset of ES6 features. The Babel caveats page does an excellent job at explaining the nitty gritty details of supporting legacy browsers.

Customizing

I want to change the primary source file

The primary source file for the library is src/index.js. Only the files that this file imports will be included in the final build. To change the name of this entry file:

1. Rename the file
2. Update the value of entryFileName in gulpfile.js in the config object.

I want to change the exported file name

1. Update main in package.json

I want to change the destination directory

1. Update main in package.json

I want to change what variable my module exports

MyLibrary is the name of the variable exported from this boilerplate. You can change this by following these steps:

1. Ensure that the variable you're exporting exists in your scripts
2. Update the value of outputFileName in the gulpfile.js inside the config object
3. Update the globals array in the test/.eslintrc file
4. Check that the unit tests have been updated to reference the new value