如何使用webpack构建Ueditor

avatar
SugarTurboS Club @SugarTurboS

由于种种原因,我们选择了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]
})

按上面的配置构建完成之后,会发现效果并不是我们想要的

<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,会根据webpack给每个chunk生成的id去排序,在entry中排的越前的,id就越小,那在html中就排在前面。所以这里我们第一种解决方案是,调换一下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里面去控制这个排序就会遇到冲突的情况,不够灵活。 所以我们把顺序的控制权下方到每个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> 

现在看上去顺序是ok了,但是运行的时候,我们发现控制台报错 regeneratorRuntime is not defined

第三步

第二步最后出现的错误,是我们使用的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']
};

继续运行后,第二步的错误已经解决了。不过,新的错误又出现了

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; 严格模式下callercalleearguments 是不能使用的,追溯到UE的源码中,我们发现里面大量使用了arguments.callee这种写法。 直接把源码都改了不现实,所以只能通过配置让bable忽略这个文件。在.babel中我们加入如下配置,

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

到此webpack就能按照我们的预期构建UE模块了。