如何在webpack中填充tinymce？
我试图让webpack认可tinymce 。 它在window上设置了一个名为tinymce的属性，所以显然有一个select是使用这样的语法来require()它（在webpack文档的EXPORTING 部分的底部描述）：
require("imports?window=>{}!exports?window.XModule!./file.js
但在这个例子中，./ ./file.js是./file.js解决的？ 我通过npm安装了tinymce，我不知道如何指定tinymce.js文件的正确path。
无论如何，我宁愿在我的configuration中处理这个，只要可能就require('tinymce') ，所以我已经安装了exports-loader并在configuration中添加了以下内容（基于这个讨论 ）：
module: { loaders: [ { test: /[\/]tinymce\.js$/, loader: 'exports?tinymce' } ] }
不幸的是，这是行不通的。 我的configuration有什么问题？
npm上的tinymce模块不能直接使用，但是包含4个不同的库。 即：
-
tinymce/tinymce.js -
tinymce/tinymce.min.js -
tinymce/tinymce.jquery.js -
tinymce/tinymce.jquery.min.js
为了能够在你的代码中执行require('tinymce') ，你可以在你的webpackconfiguration文件中添加一个别名 ，以及一个自定义的加载器。
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', }, ], },
在哪里可以用您select的分配来代替tinymce/tinymce 。
就像@cchamberlain我最终使用脚本加载器tinymce，但加载插件和默认情况下不需要的其他资源，我使用CopyWebpackPlugin而不是ES6更可configuration的解决scheme。
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' } ]) ] };
我得到这个工作类似于我捆绑React，以确保我没有在DOM中获得两个单独的实例。 我有一些导入/导出/暴露装载机的问题，所以我使用脚本加载器。
在我的设置中，我有一个公共块，我严格使用供应商（反应/ 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位置find我的主题/插件/皮肤path。 它正在path/assets/plugins ， /assets/themes ， /assets/skins （我使用webpack public path /assets/ ）寻找它们。
我解决了第二个问题，通过映射expression式来静态地服务这两条路线（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都被定义并且function与CDN相同。
我能够通过使用imports-loader和exports-loader以及copy-webpack-plugin将tinyMCE集成到基于Angular 2 / TypeScript的项目中。
首先确保必要的依赖关系是可用的，以及项目的一部分packages.json文件：
npm i tinymce --save npm i exports-loader --save-dev npm i imports-loader --save-dev npm i copy-webpack-plugin --save-dev
然后将所需的加载器添加到webpackconfiguration的加载器部分：
loaders: [ { test: require.resolve('tinymce/tinymce'), loaders: [ 'imports?this=>window', 'exports?window.tinymce' ] }, { test: /tinymce\/(themes|plugins)\//, loaders: [ 'imports?this=>window' ] }]
要在您的webpackconfiguration中使用copyWebpackPlugin，请将其导入到webpackconfiguration文件的标题部分：
var copyWebpackPlugin = require('copy-webpack-plugin');
而且，正如PetriRyhänen评论的那样，将以下条目添加到webpackconfiguration的插件部分：
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。
最后在你的Angular 2组件文件中导入tinyMCE，添加
require('tinymce') declare var tinymce: any;
到导入部分，并且tinyMCE已准备好使用。
除了这个答案 （感谢PetriRyhänen ），我想添加我的copyWebpackPlugin和tinymce.init()configuration调整。
new copyWebpackPlugin([{ context: './node_modules/tinymce/skins/lightgray', from: './**/*', to: './tinymce/skin', }]),
使用此configuration，您将获得{output}/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 });
有了这个我有开发和生产build设正常工作。
我们使用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}' }