Notesheet: Babel (JavaScript)

Status: Work in Progress. Updated: 7 February 2020


Installation

  • npm install --save-dev @babel/core @babel/cli @babel/preset-env. Install locally in your project and add it as a dev only dependency.
  • Add a .babelrc file to the root of your project. This is the Babel configuration file.
    {
      presets: ['@babel/preset-env']
    }
    
    or
    
    {
      "presets": [
        [
          "env",
          {
            "targets": {
              "browsers": ["last 2 versions", "safari >= 7"]
            }
          }
        ]
      ]
    }
  • Create a “source” directory (and sub-directories) when all source files live (e.g. “src”, “src/js”, “src/css”, etc). In my examples it’s src.
  • Create a “build” directory where all your compiled/transpiled and ready to use files are placed (e.g. “dist”, “build”, “public”). In my examples it’s dist.

 

Running with NPM

  • Create an NPM “script” to run it (will have to be run manually. Eg:
    "scripts": {
      "build": "babel src -d dist"
    },
  • Run npm run build on the command-line and Babel will transpile all JavaScript under the “src” directory and produce output files in the “dist” directory.

 

Running with webpack

  • npm install webpack webpack-cli --save-dev – Install webpack and the CLI.
  • Add a “script” to npm’s packages.json:
    "scripts": {
      "build": "webpack --config webpack.config.js"
    },
  • Create a webpack.config.js in the root of the project
    const path = require("path");
    
    module.exports = {
      mode: 'development',
      entry: "./src/js/index.js",   // Note: "src" is the source directory name from above.
      output: {
        path: path.resolve(__dirname, "dist"),   // Note: "dist" is the build directory name from above.
      filename: "bundle.js"
      }
    };
  • Run npm run build to build files into the “dist” folder.
  • Install the Babel loader for npm install babel-loader babel-core --save-dev.
  • Add the following to your webpack.config.js file:
    module.exports = {
      // ... existing content is here ...
      
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ["@babel/preset-env"]
              }
            }
          }
        ]
      }
    };
  • “This uses a regex statement to identify the JavaScript files to be transpiled with the babel-loader, whilst excluding anything in the node_modules folder from that. Lastly, the babel-loader is told to use the babel-preset-env package installed earlier, to establish the transpile parameters set in the .babelrc file.” [src]
  • Run npm run build again.

 


Resources

 

Looking into: