es的 import 兼容性写法，用 require 去写兼容

 

问题背景：在写vue项目时，遇见import的包在IE 11 不兼容的 情况。需要判断 IE11，否则IE里面的页面直接白屏且报错。

问题重现：

基于vue-quill-editor的富文本组件引入quill-image-drop-module和 quill-image-resize-module的图片处理功能。

//富文本编辑器样式

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { Quill, quillEditor } from 'vue-quill-editor'

// 图片可收缩，【此处在IE11时报错，且引用该组件的，页面直接白屏打不开】
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

问题思考：

1、使用if或try...catch...处理，不import此处理配置。无论如何写组件判断尝试，绕不开import这个。

2、然后思考 require 的引用方式。

// 图片可收缩
// import { ImageDrop } from 'quill-image-drop-module'
// import ImageResize from 'quill-image-resize-module'

//依旧报错
var { ImageDrop } = require('quill-image-drop-module');
var ImageResize = require('quill-image-resize-module');

//log；import 和 require的不同之处
console.log('ImageDrop',ImageDrop);
console.log('ImageResize',ImageResize);//ImageResize包含了一层default,默认import的方式


//报的是Quill的注册有误
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

3、然后log出 ImageResize 的 import为函数，而require的对象{default:函数}。

尝试：

var ImageResize = require('quill-image-resize-module').default;

chrome终于可以了。

解决方法：

兼容性写法

//富文本编辑器样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { Quill, quillEditor } from 'vue-quill-editor'

// 图片可收缩
// import { ImageDrop } from 'quill-image-drop-module'
// import ImageResize from 'quill-image-resize-module'

//.ie11 不兼容
let IsIE = !!window.ActiveXObject || "ActiveXObject" in window;

//其实用if，或try...catch一种就可以了
if(!IsIE){
  try {
    var { ImageDrop } = require('quill-image-drop-module');
    var ImageResize = require('quill-image-resize-module').default;

    console.log('ImageDrop',ImageDrop);
    console.log('ImageResize',ImageResize);

    Quill.register('modules/imageDrop', ImageDrop)
    Quill.register('modules/imageResize', ImageResize)

  } catch(err){
    console.log(err);
  }
}

嗯，以上勉强解决了。

虽然IE依旧不能用此富文本图片上传功能，但是其他富文本功能可以用，页面可以访问了。报错也解决了。