No Grunt/Gulp required!
Boilerplate for building a client-based JavaScript library in ES6 using the following components:
- Babel
- webpack
- Jasmine
- Karma
- babel-plugin-istanbul
- ESLint with eslint-config-airbnb
- PostCSS with Autoprefixer (for autoprefixing vendors), includes and CSSnext (for css custom-properties etc.) and cssnano (for CSS minification)
- JSDoc3 to auto-generate JSDoc documentation for JS that uses JSDoc comment syntax.
##SRC
./src folder must contain at least main.js file. There you may write your code, but preferably write it in other files that are named according to their main Class and import them into main.js
If you have a .css file that need to be included, import it into the top of main.js file via require("./file/path/relative/to/main/js/file/styles.css") which may include imports of other css files via @import "./path/to/file.css". This .css file will be run through PostCSS.
These two files are the ones that import content (via require("path/to/module.js") or import ClassName from "./class/path/ClassName.js" and via @import "path/to/module.css";) from other files located in the same folder/nested folders (if you need several files with classes)
or act as the only js/css files for the module.
If you plan to write tests using fixtures (using Jasmine-jquery with karma-jasmine-jquery) (both shipped in this bundle)
put your fixtures under /src/__tests__/fixtures/fixtureFile.html (which would contain the code of your fixture omitting <html> and <body> tags) or /src/__tests__/fixtures/fixtureFile.json. In your tests you need to include the fixture and then you'll be able to reference any HTML tags by jquery selectors via $j('.someSelector') like below:
describe('Fixture example', () => {
beforeEach(()=>{ // or beforeAll()
jasmine.getFixtures().fixturesPath = 'base/src/__tests__/fixtures'; // do not change this line, it's pointing to the correct folder with fixtures
loadFixtures('table-nested-headers.html'); // use this file as a fixture
});
it('can tests if the fixture loaded', () => {
expect($j('#confirmit_agg_table')).toExist();
});
});To make use of the fixtures please refer to Jasmine-jquery API documentation
npm installinstalls all dependencies of the projectnpm run build:prdgenerates minified build files under/distfoldernpm run build:devgenerates build files under/distfolder and starts watching all changes made to the project during this session, appending them to the build filesnpm testRuns tests that have been written and put into/src/__tests__folder. (Note: test should follow name convention:NameOfClass-test.jswhich is a test forNameOfFile.js)npm run lintLints your JavaScript code placed in src folder.npm run docsgenerates documentation for your project.jsfiles that use JSDoc3 comments and puls them intodocsfoldernpm run docs-commitpublishes documentation tohttp://ConfirmitASA.github.io/[RepoName]/[version]/where[RepoName]is name of your repository as well as name specified inpackage.json -> nameAND[version]is the version in yourpackage.json. Please make sure you have thenpm run docs-commitcommand configured properly with the correct name of repo to be used there.