Is there any way to generate multiple transpiled files using different configs with babel?

user_3550662 0
Viewed 1128

I'm fairly new to both NPM scripts and Babel. I've used Gulp before but I'm trying to move towards Webpack + NPM scripts or even NPM only builds when Webpack isn't needed. This is one such example of the latter.

I would like to

  • use my main ES6+ JS file src/main.js

  • use babel to produce a fairly modern script file docs/main.js using a target like: 

    browsers: [
       'Chrome >= 60',
       'Safari >= 10.1',
       'iOS >= 10.3',
       'Firefox >= 54',
       'Edge >= 15',
],

  • use babel again to produce a more 'legacy' version of the scripts docs/main.legacy.js using a target like:

    "browsers": ["> 1%, not ie 11, not op_mini all"]

  • use npm scripts to create two build tasks out of this which I can later put into one command such as npm run build

After reading Philip Walton's article on creating multiple targets in his build process, I would like to know:

  1. Is this possible with NPM scripts only if I don't need Webpack?
  2. What is the recommended course of action to enable such functionality?

My attempts: package.json

"scripts": {
    "buildModern": "babel src/main.js -o docs/main.js -presets=env",
    "buildLegacy": "babel --no-babelrc src/main.js > docs/main.legacy.js",
    "build": "echo '=> Building Source Files' && buildModern && buildLegacy"
},
npm-scripts babeljs npm webpack ecmascript-6
2 Answers

So for anyone who might stumble on this in the future wishing to do a similar thing, here's what I came up with. Kudos to Dan for the advice.

  1. You'll need to create a .babelrc file and within it, use the "env" option which will contain as many environments as you want.
  2. Set BABEL_ENV=name replacing name with one of the names specified in your config file.

  3. Follow that up with your babel cli commands or whatever you want to do. E.g. 

    cross-env BABEL_ENV=modern babel src/js/main.js -o docs/js/main.min.js && echo Building ES6+ Files...`

  4. Make sure to install the necessary npm dependencies as needed. Hope this helps.

Here's an example of my config file

{
    "env": {
        "legacy": {
            "presets": [
                ["minify"],
                ["env", {
                    "targets": {
                        "browsers": ["> 1%, not ie 11, not op_mini all"]
                    }
                }]
            ]
        },
        "modern": {
            "presets": [
                ["minify"],
                ["env", {
                    "targets": {
                        "browsers": [
                            "Chrome >= 60",
                            "Safari >= 10.1",
                            "iOS >= 10.3",
                            "Firefox >= 54",
                            "Edge >= 15"
                        ]
                    }
                }]
            ]
        }
    }
}
user_35506620

One way to have multiple babel configs is to use different environments in your .babelrc file (via the env option) and target them by setting the BABEL_ENV variable inside each of your NPM scripts.

A Babel-only approach will work well for transpiling individual JS files, but if you want to import other modules in your file and make it work in a browser, you will need a bundler such as Webpack or Rollup.

Edit: See Keno's write-up below.

Dan_216130
Related