The Publishing project

There is a suggested change to Babel that may change the way you write your configurations, builder tasks and other aspects of your Babel configuration.

In the blog post Upgrade to Babel 7 (WIP) the Babel maintainers give information on how upcoming changes will affect Babel installations.

The one I’m concerned about is how to use yearly plugins. The posts states that:

Instead of any yearly preset, we suggest that you use the newly created babel-preset-env which uses the correct plugins based on your environment.

When configuring Babel you’d normally use the following:

{
  "presets": ["es2015", "es2016", "es2017"]
}

My configuration file looks like this

gulp.task('babel', () => {
  return gulp.src('src/es6/**/*.js')
    .pipe($.sourcemaps.init())
    .pipe($.babel({
      presets: ['es2015', 'es2016', 'es2017']
    }))
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest('src/js/'))
    .pipe($.size({
      pretty: true,
      title: 'Babel'
    }));
});

The idea is that both of the examples above use the presets directly and, regardless of the level for ES6, 7, or 8 in your browser, it’ll load all the presets needed for each yearly plugin.

Instead the new recommended way to go is use the babel-preset-env plugin that will only load the transformations that you need for your target browsers.

Used in combination with stage-1, stage-2 and stage-3 presets we can get fuller coverage of what we want on Javascript.

Leaving the targets attribute blank makes preset-env equivalent to preset-latest in terms of functionality.

If we want to use preset-env and all the stages plugins we can do something like this in the babelrc.json configuration.

{
  "presets": ["env","stage-1","stage-2","stage-3"]
}

If we want to specify what versions of browsers we want to support then we can specify the targets parameter and provide a list in the same way we do for Autoprefixer. The following example uses the last two versions of browsers and Safari 7+

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [
          "last 2 versions", 
          "safari >= 7"
        ]
      }
    }, 
    "stage-1",
    "stage-2",
    "stage-3"
    ]
  ]
}

an equivalent Gulp task would look like this

gulp.task('babel', () => {
  return gulp.src('src/es6/**/*.js')
    .pipe($.sourcemaps.init())
    .pipe($.babel({
       presets: [
         ["env", {
           "targets": {
             "browsers": [
               "last 2 versions", 
               "safari >= 7"
              ]
            }
        }, 
        "stage-1",
        "stage-2",
        "stage-3"
        ]
      ]
    }))
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest('src/js/'))
    .pipe($.size({
      pretty: true,
      title: 'Babel'
    }));
});