Cacher is the code snippet organizer for pro developers

Integrating BABEL

• JS compiler used to convert most up-to-date js into js that modern browsers can use (converts ES6 to ES5)
• Install the babel packages

npm install --save-dev babel-core@6 babel-preset-env@1 babel-loader@7
npm install --save babel-polyfill@6

• babel-core: contains core functionality of the babel compiler
• babel-preset-env: babel preset takes care of converting the newer js code to current js code
• babel-loader: needed for webpack to load babel files

Loader

• Loaders in webpack allow us to load all kinds of different files and converting them (ex. converting sass to css)
• Insert into webpack.config.js:

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        }
    ]
}

• test: regexp that tests (for this example) all the files and selects only js files
• use: now that you selected all the js files, you specify that you want to use the babel-loader on them
• exclude: all other js files that live in the node_modules folder will also have the babel-loader applied to them, and that is unnecessary, so exlude files located in there

.babelrc

• second step in configuring babel
• add this file .babelrc into the root directory

{
    "preset": [
        "env", {
            "target": {
                "browsers": [
                    "last 5 versions",
                    "ie >= 8"
                ]
            }
        }
    ]
}

polyfill

• When some aspects are not convertible (because they weren't apart of the current version at the time) , they need to be polyfilled (ex. promises, array.from(), ...)
• npm install babel-polyfill@7 --save
• Add to webpack.config.js:

    entry: ['babel-polyfill', './src/js/index.js'],