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依舊不能用此富文本圖片上傳功能，但是其他富文本功能可以用，頁面可以訪問了。報錯也解決了。