Babel - arthur791004/notes GitHub Wiki

Babel

Usage

Via .babelrc

// .babelrc
{
  "presets": [
    ["env", {
      "modules": false,
      "useBuiltIn": true,
      "targets": {
        "browsers": [
          "> 1%",
          "last 2 versions",
          "not ie <= 11",
        ]
      }
    }],
    "react",
    "stage-0",
    "flow",
  ],
}

Basic

  • babel-cli
  • babel-core
    • Babel compiler core
  • babel-eslint
    • allows you to lint ALL valid Babel code with the fantastic ESLint
    • You only need to use babel-eslint if you are using types (Flow) or experimental features not supported in ESLint itself yet
  • babel-loader
    • Webpack plugin for Babel

Preset

Env

  • You can use the env option to set specific options when in a certain environment
  • The env key will be taken from process.env.BABEL_ENV, when this is not available then it uses process.env.NODE_ENV if even that is not available then it defaults to "development".
  • Environments
    • development, production, test
  • Notes
    • If you want your command to work across platforms, you can use cross-env

Plugins

Troubleshooting

  • babel-loader is slow!
    • exclude node_modules
    • using the cacheDirectory option
  • babel is injecting helpers into each file and bloating my code!

Reference