- 首先在我们的package.json文件中添加"type": “module”
commonjs:代表使用CommonJs来进行模块化
module:代表使用ES6来进行模块化 - 其次将我们的babel.config.js文件重命名为babel.config.json并且把文件的内容修改成json文件的格式
看到这里我相信很多人会问为什么要重命名babel.config.js文件
那我们先来聊一聊babel.config.js文件是用来干什么的
babel.config.js 文件是用来配置 Babel 转译器的配置文件。Babel 是一个 JavaScript 编译器,主要用于将新版 ECMAScript(ES6+)代码转译成向后兼容的 JavaScript 版本(这里一般是指ES5),以便在不同环境中运行。
知道了babel.config.js,那么我们来聊一聊为什么要把它重命名为babel.config.json
这通常是因为在 Vue CLI 项目中,当 Babel 配置文件使用 JavaScript 文件(.js)而不是 JSON 文件(.json)时,Vue CLI 默认会将其配置为一个同步配置文件。因此,如果你希望使用 ECMAScript 模块格式,并且避免这个错误,可以将配置文件改为使用 JSON 格式。
如果没有进行重命名的话,那么会报错
对于这个错误,我们来截取重点
You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.
大概意思是, 你使用了本地ES配置文件进行了模块化,这个配置文件只有在异步运行babel才支持该文件。 那么意思也就是babel.config.js是同步运行时支持的文件,所以babel.config.js需要重命名为babel.config.json
最后如果大家需要查看CommonJS模块化和ES6模块化的具体内容可以参考下面官方中文文档