babel - Offirmo-team/wiki GitHub Wiki

Voir aussi javascript, webpack, parcel...

Introduction

https://babeljs.io/

• http://jamesknelson.com/the-six-things-you-need-to-know-about-babel-6/
• http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/

Installation

yarn add -D babel-cli babel-preset-env babel-preset-stage-0

Utilisation

ne pas l'utiliser ?

neded ?

• http://node.green/
• http://kangax.github.io/compat-table/es6/#ff-shorthand-methods-note

utiliser

• write config https://babeljs.io/docs/en/configuration#babelconfigjs (monorepos)
• call babel https://babeljs.io/docs/en/babel-cli

"scripts": {
  "clean": "rm -rf dist .cache",
  "build:prod": "BABEL_ENV=production babel src --out-dir dist/esm",
  "build": "run-s clean build:prod",

preset-env

Config preset-env = browserlist

• https://jamie.build/last-2-versions
• http://browserl.ist/?q=last+2+Firefox+versions
• https://github.com/browserslist/browserslist#queries

simple config: .babelrc

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            ">1%",
            "not ie 11"
          ]
        }
      }
    ],
    "stage-0"
  ]
}

advanced config: .babelrc

{
  "env": {
    "development": {
      "plugins": [
        "transform-flow-strip-types",
        "transform-class-properties"
      ],
      "presets": [
        [
          "env",
          {
            "targets": {
              "browsers": [
                "last 2 Chrome versions",
                "last 2 Firefox versions"
              ]
            }
          }
        ],
        "stage-3",
        "flow"
      ]
    }
  },
  "production": {
    "plugins": [
      "transform-flow-strip-types",
      "transform-class-properties"
    ],
    "presets": [
      ["env", { "modules": false }],
      "stage-3",
      "flow"
    ]
  }
}

Problèmes rencontrés

• "How do we want to handle .babelrc lookup in 7.x?" https://github.com/babel/babel/issues/6766