How to create non-minified and minified builds with babel

Question

I installed below babel modules

npm install babel-cli babel-preset-env babel-preset-minify --save-dev

and package.json has

"scripts": {
  "build": "babel src -d dist --copy-files"
}

When I run the build with below .babelrc configurations

{
  "presets": [
    "env"
  ],
  "comments": false
}

It generates the non minified build into dist directory.

But I want to also have the minified builds of as well along with non-minified ones. I tried adding both presets in .babelrc as below

{
  "presets": [
    "minify", "env"
  ],
  "comments": false
}

but it's not generating both the minified and non-minified builds. In this case only minified version is generated.

Is there any way to ask babel to create both minified & non-minified builds like index.js & index.min.js in the dist directory.

score 2 · Answer 1 · answered Jun 24 '21 at 19:23

Here's one way of doing it:

package.json scripts:

  "scripts": {
    "build:dev": "babel src -d dist --copy-files",
    "build:min": "BABEL_ENV=minify babel src -d dist --out-file-extension .min.js",
    "build": "npm run build:dev && npm run build:min"
  }

.babelrc config:

{  
  presets: ['@babel/preset-env'],
  comments: false,
  env: {
    minify: {
      presets: ['@babel/preset-env', ['babel-preset-minify']],
    },
  }
}

Then run npm run build

How to create non-minified and minified builds with babel

1 Answers1