Webpack und toastr

Question

Ich versuche, toastr als eine Abhängigkeit mit Webpack zu laden und zu bündeln.

hier ist die gesamte webpack Konfigurationsdatei

var path = require('path'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var webpack = require('webpack'); 

const DEVELOPMENT = process.env.NODE_ENV === 'development'; 
const PRODUCTION = process.env.NODE_ENV === 'production'; 

module.exports = { 
    entry: { 
     main: './wwwroot/js/mainEntry.js', 
     vendor: ['jquery', 'tether', 
      'bootstrap', 'jquery-colorbox', 
      'jquery-confirm', 'jquery-validation', 
      'jquery-validation-unobtrusive', 
      'toastr', 'jquery.nicescroll',] 
    }, 
    output: { 
     filename: '/js/[name].js', 
     path: path.resolve(__dirname, 'wwwroot'), 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.css$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: "style-loader", 
        use: "css-loader" 
       }) 
      }, 
      { 
       test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 
       loader: 'file-loader?name=[name].[ext]&publicPath=/fonts/&outputPath=/fonts/' 
      }, 
      { 
       test: /\.(png|jpe?g|gif|ico)$/, 
       loader: 'file-loader?name=[name].[ext]&publicPath=/images/&outputPath=/images/' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: "vendor", 
      // (the commons chunk name) 
      filename: "/js/vendor.js", 
      // (the filename of the commons chunk) 
      minChunks: 2, 
     }), 
     new ExtractTextPlugin({ 
      filename: 'css/[name].min.css' 
     }), 
     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery" 
     }) 
    ], 
}; 

und mein Eintrag js Datei als

Das Bündel ohne Fehler erstellt wird. Und ich kann sehen, dass das Toastr-Skript im Bündel enthalten ist, wenn ich das Ausgabebündel ansehe. Aber das Problem ist, dass die Variable toastr nicht im Browserfenster verfügbar ist.

Ich habe versucht, nach einem ähnlichen Problem suchen, konnte aber keine finden. Dies ist das erste Mal, dass ich versuche, ein Webpack zu lernen. Jede Hilfe wird geschätzt.

Answer 1

Webpack stellt die Module, die Sie importieren, nicht zur Verfügung, es bündelt Ihren Code mit den erforderlichen Abhängigkeiten, aber sie sind immer noch modular und haben ihren eigenen Umfang. Webpack nicht einfach blind die Quellen aller Dateien kombinieren und macht sicherlich nicht alles global. Wenn die von Ihnen gepostete Eingabedatei die gesamte Datei ist, dann tun Sie überhaupt nichts.

Anstatt mit Webpack würden Sie die Arbeit in den JavaScript-Dateien tun, die Sie bündeln. Sozusagen, alles, was Sie in Ihren HTML-Code aufnehmen, sind die Bundles, die von Webpack erstellt wurden. Sie schließen keine anderen Skripts ein, die versuchen, auf etwas im Bundle zuzugreifen, sondern Sie tun es direkt in Ihrem Bundle.

Natürlich können Sie es zu window explizit definiert, es aussetzen könnten: window.toastr = toastr nach toastr importieren, aber der globalen Reichweite verschmutzenden ist in der Regel keine gute Idee, und es ist nicht anders als nur toastr in einem <script> Tag inklusive. Wenn das Paket nur als eine Bibliothek verwendet werden soll, können Sie sich Authoring Libraries ansehen. Aber ich denke, du machst nur eine normale Web-App und du solltest den ganzen Code zusammen bekommen, um von Webpack gebündelt zu werden und dich nicht darauf in einem anderen <script>-Tag zu verlassen.

Sie sollten durch die Getting Started Anleitung der offiziellen Dokumente gehen. Das Beispiel ist sehr klein (erzeugt ein DOM-Element), zeigt Ihnen aber das Konzept der Webpack-Apps und verwendet auch eine externe Abhängigkeit.