Как прокладка tinymce в webpack?
Я пытаюсь сделать в TinyMCE признан webpack. Он устанавливает свойство с именем tinymce
on window
, поэтому, очевидно, один из вариантов -require()
он использует такой синтаксис (описанный в нижней части экспорт раздела документов webpack):
require("imports?window=>{}!exports?window.XModule!./file.js
но в этом примере, как ./file.js
решен? Я установил tinymce через npm, и я не могу понять, как указать правильный путь к tinymce.js
файл.
независимо от того, я бы предпочел справиться с этим в своей конфигурации и иметь возможность просто require('tinymce')
если возможно, поэтому я установил exports-loader
и добавил следующее В моей конфигурации (на основе эта дискуссия):
module: {
loaders: [
{
test: /[/]tinymce.js$/,
loader: 'exports?tinymce'
}
]
}
к сожалению, это не работает. Что не так с моей конфигурацией?
6 ответов
модуль tinymce на npm не может потребоваться напрямую, но содержит 4 различных дистрибутива библиотеки. А именно:
tinymce/tinymce.js
tinymce/tinymce.min.js
tinymce/tinymce.jquery.js
tinymce/tinymce.jquery.min.js
уметь делать require('tinymce')
в коде, вы можете добавить псевдоним в конфигурации webpack, а также пользовательский загрузчик для вашего распределения по выбору.
resolve: {
alias: {
// require('tinymce') will do require('tinymce/tinymce')
tinymce: 'tinymce/tinymce',
},
},
module: {
loaders: [
{
// Only apply on tinymce/tinymce
include: require.resolve('tinymce/tinymce'),
// Export window.tinymce
loader: 'exports?window.tinymce',
},
],
},
где вы можете заменить tinymce/tinymce
С ваш дистрибутив.
Как и @cchamberlain, я использовал загрузчик скриптов для tinymce, но для загрузки плагинов и других ресурсов, которые не требовались по умолчанию, я использовал CopyWebpackPlugin вместо ES6 для более настраиваемого решения.
var copyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
//...
plugins: [
new copyWebpackPlugin([
{ from: './node_modules/tinymce/plugins', to: './plugins' },
{ from: './node_modules/tinymce/themes', to: './themes' },
{ from: './node_modules/tinymce/skins', to: './skins' }
])
]
};
я получил это, чтобы работать аналогично тому, как я связываю реакцию, чтобы убедиться, что я не получаю два отдельных экземпляра в DOM. У меня были некоторые проблемы с загрузчиками импорта / экспорта / expose, поэтому вместо этого я использовал скрипт-загрузчик.
в моей настройке у меня есть общий кусок, который я использую строго для поставщиков (React / tinymce).
entry: { 'loading': '../src/app/entry/loading'
, 'app': '../src/app/entry/app'
, 'timeout': '../src/app/entry/timeout'
, 'commons': [ 'expose?React!react'
, 'expose?ReactDOM!react-dom'
, 'script!tinymce/tinymce.min.js'
]
}
это работает для меня так же, как включение скрипта из CDN будет работать, однако теперь у меня были ошибки, потому что он не мог найти мои темы / Плагины / скины пути из моего местоположения node_modules. Он искал их на тропинках!--2-->, /assets/themes
, /assets/skins
(Я использую общедоступный путь webpack /assets/
).
я решил вторую проблему, сопоставив express для обслуживания этих двух маршрутов статически, как это (es6):
const NODE_MODULES_ROOT = path.resolve(__dirname, 'node_modules')
const TINYMCE_PLUGINS_ROOT = path.join(NODE_MODULES_ROOT, 'tinymce/plugins')
const TINYMCE_THEMES_ROOT = path.join(NODE_MODULES_ROOT, 'tinymce/themes')
const TINYMCE_SKINS_ROOT = path.join(NODE_MODULES_ROOT, 'tinymce/skins')
router.use('/assets/plugins', express.static(TINYMCE_PLUGINS_ROOT))
router.use('/assets/themes', express.static(TINYMCE_THEMES_ROOT))
router.use('/assets/skins', express.static(TINYMCE_SKINS_ROOT))
после этого window.tinymce
/ window.tinyMCE
определены и функции такие же, как CDN.
я смог интегрировать tinyMCE в мой угловой проект на основе 2 / TypeScript, используя imports-loader и exports-loader и copy-webpack-plugin.
сначала убедитесь, что необходимые зависимости доступны и являются частью пакетов.файл json вашего проекта:
npm i tinymce --save
npm i exports-loader --save-dev
npm i imports-loader --save-dev
npm i copy-webpack-plugin --save-dev
затем добавьте необходимый загрузчик в раздел загрузчики конфигурации webpack:
loaders: [
{
test: require.resolve('tinymce/tinymce'),
loaders: [
'imports?this=>window',
'exports?window.tinymce'
]
},
{
test: /tinymce\/(themes|plugins)\//,
loaders: [
'imports?this=>window'
]
}]
чтобы сделать copyWebpackPlugin доступным в конфигурации webpack, импортируйте его в заголовочную часть файла конфигурации webpack:
var copyWebpackPlugin = require('copy-webpack-plugin');
и, как прокомментировал Петри Ryhänen, добавьте следующую запись в раздел плагинов конфигурации webpack:
plugins: [
new copyWebpackPlugin([
{ from: './node_modules/tinymce/plugins', to: './plugins' },
{ from: './node_modules/tinymce/themes', to: './themes' },
{ from: './node_modules/tinymce/skins', to: './skins' }
])
]
этот шаг гарантирует, что (обязательные) дополнения tinyMCE также доступны в вашем webpack.
наконец, чтобы импортировать tinyMCE в файл компонента Angular 2, Добавьте
require('tinymce')
declare var tinymce: any;
в раздел импорта и tinyMCE готов к использованию.
в дополнение к ответ (спасибо Петри Ryhänen), Я хочу добавить copyWebpackPlugin
и tinymce.init()
настройки.
new copyWebpackPlugin([{
context: './node_modules/tinymce/skins/lightgray',
from: './**/*',
to: './tinymce/skin',
}]),
С этой конфигурацией вы получите все файлы кожи в .
затем вы можете инициализировать tinymce следующим образом:
import tinymce from 'tinymce/tinymce';
// A theme is also required
import 'tinymce/themes/modern/theme'; // you may change to 'inlite' theme
// Any plugins you want to use has to be imported
import 'tinymce/plugins/advlist/plugin';
// ... possibly other plugins
// Then anywhere in this file you can:
tinymce.init({
// ... possibly other options
skin_url: '/tinymce/skin', // <-- !!! here we tell tinymce where
// to load skin files from
// ... possibly other options
});
С этим у меня есть как разработка, так и производственные сборки, работающие нормально.
мы используем TinyMCE jQuery 4.1.6 и принятый ответ не работает для нас, потому что window
Кажется, используется в других местах TinyMCE (например, window.функции setTimeout). Кроме того,document
отсутствие мерцания, казалось, вызывало проблемы.
это работает для нас:
alias: {
'tinymce': 'tinymce/tinymce.jquery.js'
}
module: {
loaders: [
{
test: /tinymce\/tinymce\.jquery\.js/,
loader: 'imports?document=>window.document,this=>window!exports?window.tinymce'
}
]
}
загрузите свои плагины следующим образом:
{
test: /tinymce\/plugins/,
loader: 'imports?tinymce,this=>{tinymce:tinymce}'
}