How to remove comments from transpiled code using babel- cli

Removing comments from the converted code when using babel-cli is a common requirement that can be achieved by configuring Babel options. Below are the detailed steps and examples:

Step 1: Install Necessary Tools

First, ensure that babel-cli and related presets (e.g., @babel/preset-env) are installed in your environment. If not installed, you can install it via npm:

bash
npm install --save-dev @babel/cli @babel/core @babel/preset-env

Step 2: Configure Babel

Next, configure Babel to exclude comments from the output files. You can create a .babelrc file in the project root directory (or add Babel configuration in package.json), and add the following configuration:

json
{
  "presets": ["@babel/preset-env"],
  "comments": false
}

The key is the line "comments": false which instructs Babel to exclude comments during code conversion.

Step 3: Use Babel CLI to Convert Code

Now everything is ready; you can use the following command to convert your JavaScript files while removing all comments from the output:

bash
npx babel src --out-dir lib

This command converts all JavaScript files in the src directory to the lib directory, excluding any comments during conversion.

Example

Suppose you have a file named example.js with the following content:

javascript
// This is a comment
function add(x, y) {
    return x + y;
}

The converted result will be:

javascript
function add(x, y) {
  return x + y;
}

You can see that the comment has been successfully removed.

Conclusion

By following the above steps, you can use the babel-cli tool to remove comments from the converted code. This typically helps reduce the size of production files and improve loading efficiency. Note that always ensure comments are disabled in production configuration to avoid exposing potentially sensitive code details.