core-js报错

本文介绍了在前端项目中遇到的两个core-js导入错误:'es.array.iterator.js'和'es.array.concat'。错误的原因分别是core-js版本问题和安装包遗漏。解决方法包括删除并重新安装core-js到正确版本,以及使用npm install命令确保安装完整。同时,文章提到对package.json和package-lock.json的理解,强调了解决包版本问题时不需要直接修改配置文件,而是应该利用npm的下载、更新和删除命令。

报错一

Can’t resolve ‘E:\……\node_modules\core-js\modules\es.array.iterator.js’

原因:

core-js版本问题,下载最新版本core-js即可。

解决过程:

1、查看node_modules下没有core-js,于是安装npm i core-js@2,还是报错!!
2、再查看node_modules下的core-js,里面确实没有es.array.iterator.js。
3、查看package-lock.json文件,里面引用的都是3以上的版本,比如
package-lock.json:

"dependencies": {
        "core-js": {
          "version": "3.5.0",
          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.5.0.tgz",
          "integrity": "sha512-Ifh3kj78gzQ7NAoJXeTu+XwzDld0QRIwjBLRqAMhuLhP3d2Av5wmgE9ycfnvK6NAEjTkQ1sDPeoEZAWO3Hx1Uw==",
          "dev": true
        }
      }

4、于是删掉node_modules下的core-js文件夹,重新执行命令npm i core-js,下载的版本还是2,还是报错。
5、最后删掉package-lock.json和package.json里面两段使用core-js的配置:
package-lock.json:

"core-js": {
      "version": "3.5.0",
      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.5.0.tgz",
      "integrity": "sha512-Ifh3kj78gzQ7NAoJXeTu+XwzDld0QRIwjBLRqAMhuLhP3d2Av5wmgE9ycfnvK6NAEjTkQ1sDPeoEZAWO3Hx1Uw=="
    },

package.json:

"core-js": "^3.5.0",

6、保存文件后重新执行npm i core-js,终于下载对了版本,终于有es.array.iterator.js文件不报错了。

报错二

Can’t resolve ‘core-js/modules/es.array.concat’

原因:

安装包漏了

解决过程:

1、看了下package.json/package-lock.json都有core-js。
2、但是node_modules文件夹下并没有core-js文件夹。
3、也许是npm install的时候漏了吧,再次执行命令npm install --save core-js就OK了。

其他说明

之前一直搞不懂package.json/package-lock.json及其对第三方包的影响。
现在,还是搞不懂。
但是如果包的版本不对,咱们可以删了重新安装啊。
以往我都是删除package.json/package-lock.json配置,然后会出现各种奇奇怪怪的包版本不匹配的问题,实在不行我就强删node_modules文件夹里对应的包,再重新安装。
(因为install默认是package.json)
但是!!!npm明明就有命令可以解决这些问题,根本不需要去改配置文件啊。

npm install <package_name>
npm uninstall <package_name>

以上两条命令走天下啊,实在不行还有一条:

npm update -g <package_name>

官方文档如下:
下载:https://docs.npmjs.com/downloading-and-installing-packages-locally
更新:https://docs.npmjs.com/updating-packages-downloaded-from-the-registry
删除:https://docs.npmjs.com/uninstalling-packages-and-dependencies

### 解决方案 #### 1. **确认安装过程** 如果 `npm install vue-quill-editor --save` 命令执行失败,可能是由于网络问题或者版本不兼容引起的。可以通过更换镜像源来尝试解决问题[^3]。 ```bash npm config set registry https://registry.npmmirror.com/ npm install vue-quill-editor --save ``` #### 2. **模块引入方式** 错误可能来源于直接引入 `Quill` 的方式不当。建议使用以下推荐的引入方法: ```javascript import { quillEditor, Quill } from 'vue-quill-editor'; import 'vue-quill-editor/dist/quill.core.css'; // 核心样式 import 'vue-quill-editor/dist/quill.snow.css'; // 主题样式 import 'vue-quill-editor/dist/quill.bubble.css'; // 可选主题样式 ``` 通过这种方式引入可以有效避免因模块加载顺序引发的冲突[^2]。 #### 3. **图片扩展插件配置** 当使用 `quill-image-resize-module` 或其他第三方插件时,可能会遇到无法正常加载的情况。以下是正确的注册流程: ```javascript // 注册图片调整大小功能 import ImageResize from 'quill-image-resize-module'; Quill.register('modules/imageResize', ImageResize); export default { data() { return { options: { modules: { toolbar: [ ['bold', 'italic'], [{ list: 'ordered' }, { list: 'bullet' }], ['image'] ], imageResize: {}, // 添加此选项 }, placeholder: '请输入...', theme: 'snow' } }; } }; ``` 如果仍然存在报错情况,则需检查项目中的 Webpack 配置是否支持 ES Module 加载[^4]。 #### 4. **禁用不必要的功能** 某些情况下,默认行为可能导致额外请求或其他异常现象。例如,在拖动图片过程中触发上传操作。可以在初始化编辑器前关闭该特性: ```javascript this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', () => {}); ``` 此外,也可以手动修改 `node_modules/quill-image-extend-module` 中的相关逻辑以阻止未定义参数的提交动作[^4]。 #### 5. **防止 XSS 攻击** 为了保障数据安全性,通常会对后台接收的内容进行过滤处理。然而这可能导致前端传递过来的信息被误删或丢失部分结构化标签。因此需要合理配置白名单路径[^5]: ```yaml xss: enabled: true excludes: /system/notice,/system/assist urlPatterns: /system/*,/monitor/*,/tool/* ``` --- ### 示例代码 以下是一个完整的 Vue 组件示例,展示了如何正确集成 `vue-quill-editor` 并规避常见问题: ```vue <template> <div class="editor-container"> <quill-editor v-model="content" :options="editorOptions" ref="myQuillEditor" @ready="onEditorReady($event)" /> </div> </template> <script> import { quillEditor, Quill } from 'vue-quill-editor'; import 'vue-quill-editor/dist/quill.core.css'; import 'vue-quill-editor/dist/quill.snow.css'; import ImageResize from 'quill-image-resize-module'; Quill.register('modules/imageResize', ImageResize); export default { components: { quillEditor, }, data() { return { content: '', editorOptions: { modules: { toolbar: [ ['bold', 'italic'], [{ header: [1, 2, false] }], ['link', 'image'], ], imageResize: {}, }, placeholder: '输入您的内容', theme: 'snow', }, }; }, methods: { onEditorReady(editor) { console.log('Editor is ready!', editor); }, }, }; </script> <style scoped> .editor-container .ql-toolbar { border-bottom: none; } </style> ``` ---
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值