Django CMS + NPM + Webpack + Babel + Uikit + React

mkvirtualenv mysite

workon mysite

pip install djangocms-installer

djangocms mysite

cd mysite

python manage.py migrate

python manage.py createsuperuser

python manage.py runserver

npm install uikit

Using ES6 and ES7 in the Browser, with Babel 6 and Webpack

Initialize with npm

npm init

Accept the default for all the prompts

Installing and Configuring Webpack

Webpack is a module bundler which takes modules with dependencies and generates static assets by bundling them together based on some configuration.

Let’s start with installing webpack using npm

npm i webpack -S

Webpack requires some configuration settings to carry out its work and the best practice is doing it via a config file called webpack.config.js.

touch webpack.config.js

Update the config file as follows:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }
};

module.exports = config;

Now in the terminal run the following command

./node_modules/.bin/webpack -d

The above command runs the webpack in the development mode and generates the bundle.js file and its associated map file bundle.js.map in the src/client/public directory.

Babel installation

Start by installing the babel-core and babel-loader packages:

npm install --save-dev babel-loader babel-core

Next, you’ll need to install any presets and plugins you need. Start with babel-preset-es2015 – Babel’s collection of ES6 transforms. If you’re using JSX, you’ll also want babel-preset-react. And if you want to play with fire, you can add babel-preset-stage-0 for access to ES7 decorators, async/await, etc.

# For ES6/ES2015 support
npm install babel-preset-es2015 --save-dev

# If you want to use JSX
npm install babel-preset-react --save-dev

# If you want to use experimental ES7 features
npm install babel-preset-stage-0 --save-dev

Install all packages at ones:

npm install babel-loader babel-core babel-preset-es2015 webpack --save-dev

Runtime support

Babel can’t support all of ES6 with compilation alone — it also requires some runtime support. In particular, the new ES6 built-ins like Set, Map and Promise must be polyfilled, and Babel’s generator implementation also uses a number of runtime helpers. Given your app doesn’t have to share a JavaScript environment with other apps, you’ll be ok to use babel-polyfill to handle this:

<

pre><npm install babel-polyfill –save

Babel also bakes a number of smaller helpers directly into your compiled code. This is OK for single files, but when bundling with Webpack, repeated code will result in a heavier file size. It is possible to replace these helpers with calls to the babel-runtime package by adding the transform-runtime plugin:

npm install babel-runtime –save
npm install babel-plugin-transform-runtime –save-dev

Usage

Via config

module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

Create .babelrc configuration file

You’ve configured Babel but you haven’t made it actually do anything. Create a .babelrc config in your project root and enable some plugins.

To start, you can use the env preset, which enables transforms for ES2015+

npm install babel-preset-env --save-dev

In order to enable the preset you have to define it in your .babelrc file, like this:

touch .babelrc

{
  "presets": ["env"]
}

React installation

npm i babel-loader babel-preset-es2015 babel-preset-react -S

The babel-preset-es2015 and babel-preset-react are plugins being used by the babel-loader to translate ES6 and JSX syntax respectively.

As we did for Webpack, babel-loader also requires some configuration. Here we need to tell it to use the ES6 and JSX plugins.

Create a .babelrc file and update it as below:

touch .babelrc

 {
  "presets" : ["es2015", "react"]
}