Как собрать Ueditor с помощью webpack

внешний интерфейс JavaScript React.js Webpack

По разным причинам мы выбрали Ueditor в качестве редактора форматированного текста.

Ueditor не поддерживает модульность, поэтому его нельзя импортировать с помощью import в коде. Вначале мы импортировали js-файл Ueditor напрямую через тег script в проект и напрямую использовали window.UE в коде React для использования редактора. Но есть проблема, мы изменили исходный код UE и добавили кастомные функции. Непосредственно импортированные файлы UE кэшируются в браузере, и нам приходится очищать кеш каждый раз, когда мы вносим изменения, чтобы они вступили в силу.

Для решения проблемы кэширования конфигурация webpack должна соответствовать следующим условиям:

  1. После каждого изменения кода он может автоматически добавлять хэш к имени файла UE.
  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, поэтому использование window.UE в main сообщит об ошибке. Очевидно, нам нужен способ получить такой порядок, как мы ожидаем.

второй шаг

Атрибут chunksSortMode модуля HtmlWebpackPlugin используется для управления порядком тегов скрипта, вставленных в HTML-шаблон. По умолчанию установлено значение auto, которое будет отсортировано в соответствии с идентификатором, сгенерированным веб-пакетом для каждого фрагмента. Чем раньше в записи, тем меньше id.html в первом ряду. Итак, наше первое решение — изменить порядок входа.

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-шаблонов, которые должны ссылаться на запись, управление порядком в записи приведет к конфликтам, что недостаточно гибко. Таким образом, мы передаем контроль над порядком каждомуHtmlWebpackPlugin, поставивchunksSortModeУстановить какmanual, отсортировать по порядку фрагментов, например

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

Таким образом, скрипт в сгенерированном html будет в следующем порядке

<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>

Теперь вроде порядок в порядке, но при запуске обнаруживаем, что консоль сообщает об ошибкеregeneratorRuntime is not defined

третий шаг

Ошибка в конце второго шага была вызвана тем, что новый API ES6, который мы использовали, не был преобразован. Поскольку мы только что добавили babel-polyfill в запись main перед этим, а 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 по умолчанию добавит use strict к скомпилированному js; в строгом режимеcaller,calleeа такжеargumentsНе может быть использован, прослеживается до исходного кода UE, мы обнаружили, что он широко используетсяarguments.calleeэтот способ написания. Нереально изменить исходный код напрямую, поэтому bable может игнорировать этот файл только через конфигурацию. В .babel добавляем следующую конфигурацию,

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

На этом этапе webpack может собрать модуль UE, как мы и ожидали.

Категории