Modern Javascript Project

Modern Javascript Project.md

Let's take advantage of all marvelous tools we have on our hand to write javascript code that's

• More maintenable
• More easily to build a production distributable

More maintenable

Use modules! Using modules are essential to be able to reuse code along different parts of our app. You have different options:

• require: https://blog.risingstack.com/node-js-at-scale-module-system-commonjs-require/
• import: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
• import(): Only when using wepack. https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655

Perfer import before require when possible. For more detailed info, read:

• https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/

Building distributable

Current defacto standard is using webpack to pre-process our Javascript and build a distributable file ready to be consumed by browsers.

Webpack feeds from a configuration file where you can:

• Which are the entry points of your application (your main javascript files)
• What pre-processing tools you want to apply to your code. Examples. Babel, Typescript, etc...
• Optimize the final distributable files for best delivery through network.

Use this as a template for this configuration file:

webpack.config.js

module.exports = {
  entry: [
     'page.A': './src/js/page.a.js'
  ],
  output: {
    filename: '[name].dist.js',
    chunkFilename: '[id].dist.js',
    path: './src/dist',
    publicPath: '/'
  }
}

You can extend this configuration with a lot of different options.
Normally, your development environment will require different configuration than production (like disable minification). This document explains a good approach on the subject, but basically, it consists in having a base webpack.config.js that is overwrited with custom env values.

Requirements

We will use npm/yarn to install the toolchain required to use webpack. But first you need a package.json file describing your project. Either create one by hand or use npm init.

Then you can start installing the required tools:

npm install --save-dev webpack-cli webpack

After this, you can simply call ./node_modules/.bin/webpack in the same folder you got your webpack.config.js and voilà!

Writing Modern Javascript (WIP)

Javascript is a rapid evolving language and new features are constantly appearing. However, you cannot use them safely until browser vendors implement them in their respective browsers.

Thankfully we have a tool that will allow us to write modern Javascript and make it work in today's browsers: Babel

In order to use it, we first need to install babel:

npm install --save-dev @babel/core @babel/preset-env babel-loader

This will install three things:

• @babel/core: This is the Babel engine that will transform our modern javascript into plain javascript ready to be executed by the target browser.
• @babel/present-env: This is a collection of babel configurations that enable/disable Javascript features as we want/need.
• babel-loader: This is a "webpack plugin" that will hook babel with webpack so the latter calls babel in the bundling process.

Then, just need to tell webpack to pre-process javascript files with babel:

module.exports = {
  entry: [
     'page.A': './src/js/page.a.js'
  ],
  output: {
    filename: '[name].dist.js',
    chunkFilename: '[id].dist.js',
    path: './src/dist',
    publicPath: '/'
  },
  loaders: {
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
  }
}