在现代的JavaScript开发中，使用ES Modules（ESM）已经成为一种常见的模块化方案。然而，有些情况下，我们可能需要将ES Modules代码转换为CommonJS（CJS）代码，以便在旧版本的Node.js或其他环境中使用。Webpack和Babel是两个非常强大的工具，可以帮助我们实现这个转换过程。

1. 安装依赖

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

2. 创建Webpack配置文件
   在项目根目录下创建一个名为webpack.config.js的文件，并添加以下内容

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
    module.exports = {
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: __dirname + '/dist',
        },
        module: {
            rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                    ['@babel/preset-env', { modules: 'commonjs' }],
                    ],
                },
                },
            },
            ],
        },
    };
   

在上述配置中，我们指定了入口文件为src/index.js，输出文件为dist/bundle.js。同时，我们使用了babel-loader来处理JavaScript文件，并将@babel/preset-env的modules选项设置为commonjs，以将ES Modules代码转换为CommonJS代码。

1. 创建Babel配置文件 在项目根目录下创建一个名为.babelrc的文件，并添加以下内容：

   1
   2
   3
   4
   5
    {
        "presets": [
            ["@babel/preset-env", { "modules": false }]
        ]
    }
   

在上述配置中，我们将@babel/preset-env的modules选项设置为false，以确保Babel不会对ES Modules进行转换。

1. 在src目录下，创建add.js

   1
   2
   3
    export const add = (a,b) => {
        return a + b;
    }
   

2. 在src目录下，创建index.js

   1
   2
   3
    import { add } from './add'
   
    console.log(add(1,2)); 
   

注意我们用的是ESModule语法import，而不是require

1. 在package.json中添加新的命令行：

   1
    "build": "webpack"
   

2. 运行命令行npm run build，生成dist/bundle.js

Reference

使用Webpack和Babel将ES Modules代码转换为CommonJS代码的配置）](https://juejin.cn/post/7280436213886779433)

• Previous
  Webpack 学习笔记