How do I transpile ES modules to CommonJS?

How do I transpile ES modules to CommonJS?

You can use tools like Babel or Webpack to transpile ES modules to CommonJS. Would you like a step-by-step guide?

Yes, please provide a step-by-step guide using Babel.

First, install Babel and the necessary presets. You can do this using npm:

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

Next, create a Babel configuration file named .babelrc and add the following:

{
  "presets": ["@babel/preset-env"]
}

Finally, run Babel to transpile your files:

npx babel src --out-dir lib

What if I want to use Webpack instead?

With Webpack, you need to install it along with Babel loader:

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

Then, create a webpack.config.js file and configure it to use Babel for your JavaScript files.

Can you show me an example of the Webpack configuration?

Sure! Here's a simple example of a webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.js$/, // Transpile .js files
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};