Einen node_module globalen Webpack mit 2

ich das unten stehende Paket auf einem Winkel Projekt bin mit:Einen node_module globalen Webpack mit 2

https://github.com/pablojim/highcharts-ng

Voraussetzung ist, dass es highcharts als globale Abhängigkeit benötigt, in denen es Ihnen ein hinzuzufügen, sagt Script-Tag in Ihre HTML:

<script src="http://code.highcharts.com/highcharts.src.js"></script>

Anstatt fügen sie das Skript-Tag in meinem HTML ich möchte es über Webpack global machen.

Ich habe highcharts über npm installiert und haben versucht, die ProvidePlugin verwenden und die noparse hier beschriebenen Methoden (ohne Erfolg): https://webpack.js.org/guides/shimming/#scripts-loader

Für die ProvidePlugin Option I verwendet:

new webpack.ProvidePlugin({ 
    Highcharts: "highcharts", 
})

für noparse:

noParse: [ 
    /[\/\\]node_modules[\/\\]highcharts[\/\\]highcharts\.js$/, 
],

Weder gearbeitet, was bedeutet, wenn highcharts-ng zu arbeiten versucht, ein Fehler bekommt, da es keineerstellen 10:

TypeError: Cannot read property 'Chart' of undefined 

// from highcharts-ng which throws above error 
chart = new Highcharts[chartType](mergedOptions, func);

Hier ist mein Winkelmodul

import angular from 'angular' 
import highchartsNg from 'highcharts-ng' 
import { ReportsData } from './reports.data' 
import { reportsWidget } from './reports-widget/component' 

export const ReportsModule = angular 
    .module('reports', [ 
    highchartsNg, 
    ]) 
    .factory('ReportsData', ReportsData) 
    .component('reportsWidget', reportsWidget) 
    .name

Meine webpack config:

var webpack = require('webpack') 

module.exports = { 
    context: __dirname + '/app/modules', 
    entry: { 
    vendor: ['angular', 'highcharts-ng'], 
    modules: './modules.js', 
    }, 
    output: { 
    path: __dirname + '/.tmp/modules', 
    filename: '[name].bundle.js', 
    }, 
    plugins: [ 
    // info: https://webpack.js.org/guides/code-splitting-libraries/ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: ['vendor', 'manifest'], 
    }), 
    ], 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     use: [ 
      { 
      loader: 'babel-loader', 
      options: { presets: ['es2015'] }, 
      }, 
     ], 
     }, 
    ], 
    }, 
}

Quelle

2016-12-21 AnthW

Ich habe highcharts meinen Anbieter Bündel hinzugefügt: Anbieter: [ 'eckig', 'highcharts', 'highcharts-ng'], auch hinzugefügt: Lader: [ { Test: /[\/\\]node_modules[\/\\]highcharts[\/\\]highcharts\.js$/, Lader: Exporte-loader Highcharts? ', }, ], Dies ändert nicht die Datei und ich habe immer noch th Das Problem. Ist das obige korrekt? – AnthW

Es tut mir leid, mein erster Link war auf das falsche Plugin :(. Ich meinte die [Expose-Loader] (https://github.com/webpack/expose-loader). Dies ermöglicht es Ihnen, global zu definieren (auf der Fenster) verfügbare Pakete Leider bin ich mit diesem Loader nicht auf dem Migrationspfad zu webpack 2. – KevBot

Verwenden expose-loader und schreiben require('expose-loader?Highcharts!highcharts'); irgendwo vor der ersten Nutzung von Highcharts globalen Variablen. Dies erfordert Highcharts und speichern Sie es als window.Highcharts im Browser offen.

Unter der Haube webpack macht es für Sie als:

/* 0 */ 
/***/ function(module, exports, __webpack_require__) { 

/* WEBPACK VAR INJECTION */(function(global) {module.exports = global["Highcharts"] = __webpack_require__(1); 
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(2))) 

/***/ }

Quelle

2016-12-21 17:02:57 dotcs

Einen node_module globalen Webpack mit 2

Antwort

Verwandte Themen