如何使用webpack构建Ueditor

[SugarTeam]

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

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

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