如何使用webpack构建Ueditor

栏目: JavaScript · 发布时间: 5年前

内容简介:由于种种原因,我们选择了Ueditor作为我们的富文本编辑器选型。Ueditor不支持模块化,所以无法在代码中使用import去引入。一开始我们在项目中是将Ueditor的js文件直接通过script标签引入,在React的代码里直接使用window.UE去使用编辑器。但是这就有一个问题,我们对UE的源码进行了改动,加入了定制化的功能。而直接引入的UE文件在浏览器是有缓存的,我们每次改动都要清除缓存才能生效。我们要解决缓存这个问题,webpack配置就必须满足以下条件:

由于种种原因,我们选择了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模块了。


以上所述就是小编给大家介绍的《如何使用webpack构建Ueditor》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

互联网运营之道

互联网运营之道

金璞、张仲荣 / 电子工业出版社 / 2016-1 / 49.00

《互联网运营之道》内容由运营方法论切入,包括运营的江湖地位、运营的基本逻辑、运营的三大手段(内容运营、活动运营和用户运营)、数据统计方法,等等。虽然是讲方法论,但内容上却有着深入的运营逻辑思考和大量实战案例验证。在讲解了方法论之后,《互联网运营之道》逐步深入剖析如何反脆弱,如何做运营创新,以及如何从小到大切入细分市场,等等。 对于互联网公司来说,产品设计部门和研发部门保证了创意的实现,是从0......一起来看看 《互联网运营之道》 这本书的介绍吧!

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具