nazariym/jk_video

Vintage

Vintage start project (with webpack chunks auto generation).

Overview

• Installation
• WebStorm configuration
• NPM scripts
• Code splitting
• Public API
• JSDoc
• Notes

Installation

In order to start working with project, you must:

Clone repository to your local machine

git clone https://bitbucket.org/vintageua/vintage-start-proj.git

Install dependencies

npm

npm i -g jscs && npm i

yarn

yarn add global jscs && yarn install

WebStorm configuration

Turn off 'Safe write' option

Settings | Appearance & Behavior | System Settings | Use "safe write"

Change ECMAScript version

Settings | Languages & Frameworks | Javascript | Javascript language version: "ECMAScript6"

Enable JSCS linter

Settings | Languages & Frameworks | Javascript | Code Quality Tools | JSCS | "Enable"

NPM scripts

Start development

npm run development

Build production bundle (build '.min' files, prettify html)

npm run production

Code splitting

If your project is going to be large and you want to split index.js file into separate modules, use webpack-chunks branch of this repository:

git checkout webpack-chunks

Then add a new chunk:

require.ensure([], require => {
  const loadedChunk = require('path/to/chunk');

  // do stuff with loaded module

}, 'chunkFileName');

Warning!

You should restart task (e.g. development) after adding a new chunk. Issue #26

Public API

Path: js/components/publicAPI (example)

Public API is created for back-end developers.

It should contain methods to attach / initialize / destroy jquery plugins etc.

JSDoc

Install JSDoc globally

npm install jsdoc -g

Generate docs

npm run-script compileDocs

Open docs

npm run-script openDocs

Notes

1. Before pushing to Bitbucket repository (or before transferring the project to Back-end department) make sure to run production bundle.
2. Ensure all of your Public API's has both init and destroy methods.
3. Always restart task (e.g. development) after adding a new chunk.

Built with

• Gulp
• Pug
• Webpack
• Sass
• Babel