Webpack 4 + babel + coreJs@3 下 CommonJs 的奇怪错误

Question

这是入口：

// index.js
const {test} = require('./handle')
test()

这是一个commonjs模块

// handle.js
module.exports = {
  test() {
    console.log('>>>>>   handle get trigger')
    console.log(typeof [])
  }
}

编译成功，然后我在运行

时得到这个错误

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

如果我从 handle.js 中删除 console.log(typeof [])，错误就会消失。

我的 babel 配置是：

{
                test: /\.jsx?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"],
                        plugins: [
                            [
                                "@babel/plugin-transform-runtime",
                                {
                                    "corejs": 3
                                }
                            ],
                            "@babel/plugin-syntax-dynamic-import"
                        ]
                    }
                },
                include: /src/
            },

用ES6模块写的时候报错也消失了

Answer 1

@babel/plugin-transform-runtime 将 import 添加到我的文件中！所以它变成了 ES6Module 和 CommonJs 的混合使用！那就是问题所在!!!!!!

所以只能用Es6module或者加个babel插件@babel/plugin-transform-modules-commonjs

Webpack 4 + babel + coreJs@3 下 CommonJs 的奇怪错误

Weird error with CommonJs under Webpack4 + babel8 + coreJs@3

webpack

babeljs

commonjs