JavaScript Details

Leave it to Babel & webpack

.babelrc config

Refer to the babel-loader option of webpack.

.babelrc in the root of DEKOMORI, it's a different config referred by gulp etc.

webpack-config

3 files structure, common, dev, production separately.

Already settings

• resolve modules directory
• tree-shaking
• commonsChunk
• babel-loader
• Be able to refer to NODE_ENV
• Be able to refer to .modernizrrc
• Be able to provide jQuery globally
• Uglify when production.
• sourcemaps

commonsChunk

add entry points, then these files are output.

configs/webpack-common.config.babel.js

const commonConfig = {
  // entry points
  entry: {
    app: DIR.src.assetsScript + '/app.js',
    index: DIR.src.assetsScript + '/index.js'
  },
  // output config
  output: {
    filename: '[name].bundle.js'
  }
}

Refer to NODE_ENV

console.log('process.env.NODE_ENV:', process.env.NODE_ENV)

Refer to .modernizrrc

Reference config is here.

DEKOMORI/configs/.modernizrrc

you can use modernizr.

import Modernizr from 'modernizr'

Provide jQuery globally

Not use import or require, but can use jQuery.
You can write $ anywhere then use jQuery.

Can also be used other than $.

• $
• jquery
• jQuery
• window.jQuery

Stable ES.next + Stage-3 support

using these plugins.

• babel-plugin-transform-runtime
• babel-preset-env
• babel-preset-stage-3