关于vuejs-templates/webpack 中 “exports is not defined”报错的处理
利用vue-cli脚手架搭建的项目,使用的是vuejs-templates/webpack的模板。
但在引用第三方组件的时候,在浏览器中报错“exports is not defined”。
根据浏览器报错信息,查询到报错来源是第三方组件的一段代码:
Object.defineProperty(exports, "__esModule", {
value: true
});
这是使用了CommonJs写法,而在应用中并没有做相应的模块转换使得浏览器能够识别。而导致这个问题是因为balbel的配置文件.babelrc的问题:
{
"presets": [
["env", { "modules": false }],
"stage-2"
],
"plugins": ["transform-runtime"],
"comments": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}
其中{ "modules": false }阻止了babel进行模块转换,具体见modules配置的说明,所以,将modules改为默认设置即可,或者删除该配置。
初学Vue中,记录学习中遇见的问题以作备查,如果有不对的地方,还望指正。