Wie kann man im Webpack ymben?

Question

Ich versuche tinymce von Webpack erkannt zu bekommen. Es setzt eine Eigenschaft tinymce auf window genannt, so offenbar eine Option ist es require() wie dies mit Syntax (am unteren Rand des EXPORTING section der webpack docs beschrieben):

require("imports?window=>{}!exports?window.XModule!./file.js

Aber in diesem Beispiel, wie ist ./file.js gelöst? Ich habe Tinymce über npm installiert, und ich kann nicht herausfinden, wie man den richtigen Pfad zur tinymce.js Datei angibt.

Egal, würde ich eher das nur require('tinymce') wenn möglich in meiner Konfiguration handhaben und in der Lage sein, also habe ich exports-loader installiert und addierten die folgenden meiner Konfiguration (basierend auf this discussion):

module: { 
    loaders: [ 
     { 
      test: /[\/]tinymce\.js$/, 
      loader: 'exports?tinymce' 
     } 
    ] 
} 

Leider funktioniert das nicht. Was ist falsch an meiner Konfiguration?

Answer 1

Das tinymce-Modul auf npm kann nicht direkt benötigt werden, enthält aber 4 verschiedene Verteilungen der Bibliothek. Nämlich:

• tinymce/tinymce.js
• tinymce/tinymce.min.js
• tinymce/tinymce.jquery.js
• tinymce/tinymce.jquery.min.js

zu können require('tinymce') in Ihrem Code zu tun, Sie an alias in Ihrem webpack Config hinzufügen können, sowie ein Custom Loader für Ihre Distribution Ihrer Wahl.

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', 
    }, 
    ], 
}, 

Wo Sie tinymce/tinymce mit Ihrer Distribution der Wahl ersetzen.

Answer 2

Wir verwenden TinyMCE jQuery 4.1.6 und die akzeptierte Antwort funktionierte nicht für uns, weil window scheint an anderen Orten von TinyMCE (z. B. window.setTimeout) verwendet wird. Auch document nicht shimming schien Probleme zu verursachen.

Dies funktioniert für uns:

alias: { 
    'tinymce': 'tinymce/tinymce.jquery.js' 
} 

module: { 
    loaders: [ 
     { 
      test: /tinymce\/tinymce\.jquery\.js/, 
      loader: 'imports?document=>window.document,this=>window!exports?window.tinymce' 
     } 
    ] 
} 

wie diese Plugins laden:

{ 
    test: /tinymce\/plugins/, 
    loader: 'imports?tinymce,this=>{tinymce:tinymce}' 
} 

Answer 3

habe ich dies ähnlich zu arbeiten, wie ich bündeln, um sicherzustellen, reagiere ich nicht bekommen, zwei separate Instanzen in DOM. Ich hatte ein paar Probleme mit Imports/Exports/Expose Loadern, stattdessen benutzte ich einen Script-Loader.

In meinem Setup habe ich einen Commons Chunk, den ich ausschließlich für Anbieter verwende (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' 
         ] 
      } 

Dies funktioniert für mich die gleiche Art und Weise, dass das Skript von CDN einschließlich hatte ich Fehler jetzt aber funktionieren würde, weil es nicht meine Themen/plugins/skin Pfade von meinem node_modules Standort finden könnte. Es suchte nach ihnen auf den Pfaden /assets/plugins, /assets/themes, /assets/skins (Ich benutze Webpack öffentlichen Pfad /assets/).

ich beschlossen, die zweite Ausgabe durch Zuordnung ausdrücken diese beiden Routen statisch wie so (es6) zu dienen:

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

Nach dieser window.tinymce/window.tinyMCE beide definiert und die gleiche Funktion wie CDN zu tun.

Answer 4

Genau wie @cchamberlain habe ich den Skriptlader für tinymce verwendet, aber um die Plugins und andere Ressourcen zu laden, die nicht standardmäßig benötigt wurden, verwendete ich anstelle von ES6 CopyWebpackPlugin für eine besser konfigurierbare Lösung.

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' } 
    ]) 
    ] 
}; 

Answer 5

konnte ich tinyMCE in meinem Angular 2/Typoskript basiertes Projekt integrieren, indem die Einfuhren-loader-Export-loader und die Kopie-webpack-Plugin.

zunächst sicher, dass die notwendigen Abhängigkeiten zur Verfügung stehen und ein Teil der packages.json Datei Ihres Projekts:

npm i tinymce --save 
npm i exports-loader --save-dev 
npm i imports-loader --save-dev  
npm i copy-webpack-plugin --save-dev 

Dann fügen Sie den erforderlichen Loader an den Lader-Abschnitt Ihrer webpack Konfiguration:

loaders: [   
     { 
      test: require.resolve('tinymce/tinymce'), 
      loaders: [ 
       'imports?this=>window', 
       'exports?window.tinymce' 
      ] 
     }, 
     { 
      test: /tinymce\/(themes|plugins)\//, 
      loaders: [ 
       'imports?this=>window' 
      ] 
     }] 

Um die copyWebpackPlugin in Ihrer webpack Konfiguration zu machen, ist es im Kopfteil der Datei webpack Konfiguration importieren:

Und wie Petri Ryhänen kommentierte, fügen Sie den folgenden Eintrag in dem Plugin-Abschnitt Ihrer webpack Konfiguration:

plugins: [ 
    new copyWebpackPlugin([ 
     { from: './node_modules/tinymce/plugins', to: './plugins' }, 
     { from: './node_modules/tinymce/themes', to: './themes' }, 
     { from: './node_modules/tinymce/skins', to: './skins' } 
    ]) 
] 

Dieser Schritt stellt sicher, dass (erforderlich) Addons von tinyMCE auch in Ihrem webpack zur Verfügung stehen.

Schließlich tinyMCE in Ihre Angular 2-Komponenten-Datei zu importieren, fügen Sie

require('tinymce') 

declare var tinymce: any; 

auf den Import Abschnitt und TinyMCE ist einsatzbereit.

Answer 6

Als Ergänzung zu this answer (dank Petri Ryhänen), möchte ich meine copyWebpackPlugin und tinymce.init() Konfigurationseinstellungen hinzuzufügen.

new copyWebpackPlugin([{ 
    context: './node_modules/tinymce/skins/lightgray', 
    from: './**/*', 
    to: './tinymce/skin', 
}]), 

Mit dieser Konfiguration finden Sie alle Skin-Dateien in {output}/tinymce/skin Ordner erhalten.

Dann können Sie tinymce wie folgt initialisieren:

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 
}); 

Damit habe ich sowohl die Entwicklung und Produktion Builds normalerweise arbeiten.