webpack打包vue项目报错:Cannot assign to read only property ‘exports‘ of object

简介: webpack打包vue项目报错:Cannot assign to read only property ‘exports‘ of object

打包时报错

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

原因

webpack 2中不允许混用import和module.exports


解决方法

安装插件

npm install --save-dev @babel/plugin-transform-modules-commonjs

插件地址:https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs#via-babelrc-recommended


增加配置 babel.config.js


{
  plugins: ['@babel/plugin-transform-modules-commonjs']
}

参考

Cannot assign to read only property ‘exports’ of object 解决办法

相关文章
|
4月前
|
JavaScript
vue学习(7)Object.defineProperty
vue学习(7)Object.defineProperty
44 2
|
4月前
|
缓存 监控 UED
升级 Vue3 时,如何减少打包体积的增加?
升级 Vue3 时,如何减少打包体积的增加?
302 59
|
4月前
|
API UED
升级 Vue3 后,项目的打包体积会有什么变化?
升级 Vue3 后,项目的打包体积会有什么变化?
168 57
|
2月前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
3月前
|
JavaScript
Vue 的响应式原理中 Object.defineProperty 有什么缺陷
Vue 的响应式原理主要依赖于 `Object.defineProperty`,但该方法存在一些缺陷:无法检测到对象属性的添加和删除,且对大量数据进行代理时性能较差。Vue 3 中改用了 Proxy 来解决这些问题。
|
3月前
|
JavaScript 前端开发
|
4月前
|
JavaScript 开发工具
vite如何打包vue3插件为JSSDK
【9月更文挑战第10天】以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤:首先通过 `npm init vite-plugin-sdk --template vue` 创建 Vue 3 项目并进入项目目录 `cd vite-plugin-sdk`。接着,在 `src` 目录下创建插件文件(如 `myPlugin.js`),并在 `main.js` 中引入和使用该插件。然后,修改 `vite.config.js` 文件以配置打包选项。最后,运行 `npm run build` 进行打包,生成的 `my-plugin-sdk.js` 即为 JS SDK,可在其他项目中引入使用。
221 6
|
5月前
|
缓存 JSON JavaScript
简单介绍下从零搭建 Webpack 项目
本文详细介绍了Webpack中Loader的概念及其重要性。Webpack仅支持处理JS和JSON文件,而Loader能够帮助处理其他类型的文件,如CSS、图片等,并将其转换为有效的模块。文章首先解释了Loader的基本原理,接着介绍了几种常见Loader的配置和使用方法
30 1
|
5月前
|
前端开发 JavaScript API
|
5月前
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试
本文介绍了如何在Vue3项目中配置开启Gzip压缩以减小打包文件体积,并在移动端调试时集成vConsole插件,同时使用webpack-bundle-analyzer插件进行打包分析。
419 0
Vue3项目打包时开启 Gzip 压缩和移动端调试时开启 vConsole 调试