Skip to content
Add this plugin to generate mirrored esm modules for your existing bundles
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images new screenshot May 24, 2018
src Accept Dynamic Entries and RuntimeChunks (#21) Jun 17, 2019
tests Accept Dynamic Entries and RuntimeChunks (#21) Jun 17, 2019
.gitignore setting up ava Jan 13, 2019
.npmignore adding errors May 23, 2018
.prettierrc adding prettier Jun 6, 2019
.travis.yml adding travis Jan 13, 2019
LICENSE Initial commit May 20, 2018
README.md adding travis logo Jan 13, 2019
package.json Release 0.5.0 Jun 17, 2019
yarn.lock adding prettier Jun 6, 2019

README.md

babel-esm-plugin

Build Status

Add this plugin to generate mirrored esm modules for your existing bundles. You may use these bundles in module/nomodule in your web-app and ship less transpiled code to your users. Works with Webpack4 and Babel7

npm i -D babel-esm-plugin

Note

This plugin only works when you're already using babel-preset-env.

Also, there is an expectation that your babel-preset-env is configured in the shape:

{
  use: {
    loader: 'babel-loader',
    options: {
      "presets": [["@babel/preset-env", {
        "targets": {
          "browsers": ["last 2 versions", "safari >= 7"]
        }
        ....
      }]]
    },
  },
}

Options

new BabelEsmPlugin({
  filename: '[name].es6.js',
  chunkFilename: '[id].es6.js',
  excludedPlugins: [...],
  additionalPlugins: [...],
  beforeStartExecution: function(plugins, babelConfig) {}
});
  1. filename: Output name of es6 bundles. (default: '[name].es6.js')
  2. chunkFilename: Output name of es6 chunks. (default: '[id].es6.js')
  3. excludedPlugins: List of plugins you want to exclude from generating es6 bundles.
  4. additionalPlugins: List of plugins you want to add while generating es6 bundles.
  5. beforeStartExecution: A callback function which passes all plugins and the new babel config, to a function where the user can modify them before starting the ESM build.

Without this plugin

A usual output from webpack output looks like this: ES5 output

With this plugin

With this plugin added, you will be generating es6 outputs: ES5 output

How to use

  const BabelEsmPlugin = require('./babel-esm-plugin');

  module.exports = {
    entry: {
      index: './index.js',
      home: './index2.js'
    },
    output: {
      filename: "[name].js"
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              "presets": [["@babel/preset-env", {
                "targets": {
                  "browsers": ["last 2 versions", "safari >= 7"]
                }
              }]]
            },
          },
        }
      ]
    },
    plugins: [
      new BabelEsmPlugin()
    ]
  }
You can’t perform that action at this time.