使用webpack構建ueditor

由于種種原因兑燥,我們選擇了Ueditor作為我們的富文本編輯器選型鱼炒。

Ueditor不支持模塊化,所以無法在代碼中使用import去引入欲芹。一開始我們在項目中是將Ueditor的js文件直接通過script標簽引入卿啡,在React的代碼里直接使用window.UE去使用編輯器。但是這就有一個問題耀石,我們對UE的源碼進行了改動牵囤,加入了定制化的功能。而直接引入的UE文件在瀏覽器是有緩存的滞伟,我們每次改動都要清除緩存才能生效揭鳞。

我們要解決緩存這個問題,webpack配置就必須滿足以下條件:

  1. 每次改動代碼后梆奈,能自動給UE的文件名加hash
  2. 能自動插入html模板文件并在主入口文件加載之前加載完成

第一步

為了能讓UE的文件進入打包流程野崇,我們將它作為一個新的入口文件

const entry = {
    main: ['babel-polyfill', './src/main.js'],
    ueditor_config: ['./src/common/UEditor/ueditor.config.js'],
    ueditor_all: ['./src/common/UEditor/ueditor.all.js']
};

new HtmlWebpackPlugin({
    template: `./src/app/${key}/templates/${filename}`,
    filename: `../view/${targetHtml}`,
    hash: true,
    chunks: [ueditor_all, ueditor_config, main]
})

按上面的配置構建完成之后,會發(fā)現(xiàn)效果并不是我們想要的

<script type="text/javascript" src="/public/main.xxxx.js"></script> 
<script type="text/javascript" src="/public/ueditor.config.xxxx.js"></script> 
<script type="text/javascript" src="/public/ueditor.all.xxxx.js"></script>

main.js在UE的前面亩钟,這樣main中使用window.UE就會報錯乓梨。顯然,我們需要一種方式來讓這個順序符合我們的預期清酥。

第二步

HtmlWebpackPlugin的chunksSortMode屬性是用來控制插入模板html的script標簽的順序的扶镀,默認是auto,會根據(jù)webpack給每個chunk生成的id去排序焰轻,在entry中排的越前的臭觉,id就越小,那在html中就排在前面辱志。所以這里我們第一種解決方案是蝠筑,調(diào)換一下entry順序

const entry = {
    ueditor_config: ['./src/common/UEditor/ueditor.config.js'],
    ueditor_all: ['./src/common/UEditor/ueditor.all.js']
    main: ['babel-polyfill', './src/main.js']
};

但是這個方法有缺陷,當項目中有多個模板html需要引用入口的時候,在entry里面去控制這個排序就會遇到?jīng)_突的情況,不夠靈活焰雕。
所以我們把順序的控制權下方到每個HtmlWebpackPlugin中往核,通過把chunksSortMode設置為manual,按chunks的順序去排序犯祠,例如

new HtmlWebpackPlugin({
    ...
    chunks: [ueditor_config, ueditor_all, main]
})

這樣竿报,生成的html中srcipt就會是下面的順序

<script type="text/javascript" src="/public/ueditor.config.xxxx.js"></script> 
<script type="text/javascript" src="/public/ueditor.all.xxxx.js"></script>
<script type="text/javascript" src="/public/main.xxxx.js"></script> 

現(xiàn)在看上去順序是ok了俄删,但是運行的時候忆某,我們發(fā)現(xiàn)控制臺報錯
regeneratorRuntime is not defined

第三步

第二步最后出現(xiàn)的錯誤渠缕,是我們使用的ES6新API沒有被轉換導致的。由于之前我們只是在main的入口加了babel-polyfill褒繁,而main又是在UE的后面加載的亦鳞,所以導致了報錯。所以需要將babel-polyfill放到入口第一個文件

const entry = {
    ueditor_config: ['babel-polyfill', './src/common/UEditor/ueditor.config.js'],
    ueditor_all: ['./src/common/UEditor/ueditor.all.js']
    main: ['./src/main.js']
};

繼續(xù)運行后棒坏,第二步的錯誤已經(jīng)解決了燕差。不過,新的錯誤又出現(xiàn)了

TypeError: 'caller', 'callee', and 'arguments' 
properties may not be accessed on strict mode functions or the arguments objects for calls to them

第四步

bable會默認給編譯的js加上use strict;
嚴格模式下caller坝冕、calleearguments 是不能使用的徒探,追溯到UE的源碼中,我們發(fā)現(xiàn)里面大量使用了arguments.callee這種寫法喂窟。
直接把源碼都改了不現(xiàn)實测暗,所以只能通過配置讓bable忽略這個文件。在.babel中我們加入如下配置磨澡,

"presets": [
    "react"
 ],
 "ignore": [
     "./src/common/UEditor/ueditor.all.js"
 ],

到此webpack就能按照我們的預期構建UE模塊了碗啄。

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市稳摄,隨后出現(xiàn)的幾起案子稚字,更是在濱河造成了極大的恐慌,老刑警劉巖厦酬,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件胆描,死亡現(xiàn)場離奇詭異,居然都是意外死亡仗阅,警方通過查閱死者的電腦和手機昌讲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來减噪,“玉大人短绸,你說我怎么就攤上這事⌒ⅲ” “怎么了鸠按?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵礼搁,是天一觀的道長饶碘。 經(jīng)常有香客問我,道長馒吴,這世上最難降的妖魔是什么扎运? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任瑟曲,我火速辦了婚禮,結果婚禮上豪治,老公的妹妹穿的比我還像新娘洞拨。我一直安慰自己,他們只是感情好负拟,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布烦衣。 她就那樣靜靜地躺著,像睡著了一般掩浙。 火紅的嫁衣襯著肌膚如雪花吟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天厨姚,我揣著相機與錄音衅澈,去河邊找鬼。 笑死谬墙,一個胖子當著我的面吹牛今布,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播拭抬,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼部默,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了造虎?” 一聲冷哼從身側響起甩牺,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎累奈,沒想到半個月后贬派,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡澎媒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年搞乏,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片戒努。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡请敦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出储玫,到底是詐尸還是另有隱情侍筛,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布撒穷,位于F島的核電站匣椰,受9級特大地震影響,放射性物質發(fā)生泄漏端礼。R本人自食惡果不足惜禽笑,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一入录、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧佳镜,春花似錦僚稿、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至啊掏,卻和暖如春唤崭,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背脖律。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工谢肾, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人小泉。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓芦疏,卻偏偏與公主長得像,于是被迫代替她去往敵國和親微姊。 傳聞我的和親對象是個殘疾皇子酸茴,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容