WebPACKの2

Question

私は、角プロジェクトに以下のパッケージを使用しています使用してグローバルnode_module作る：

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

要件は、それはそれはあなたが追加するよう指示した世界的な依存関係、などhighchartsを必要としていることであるがあなたのHTMLにスクリプトタグ：

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

よりもむしろ私はWebPACKの経由それはグローバルしたいと思い、私のHTMLの中に上記のスクリプトタグを追加します。

Iは、NPMを介しhighchartsがインストールされているとProvidePluginとnoParse（無駄に）ここに記載の方法を用いて試みた：noParseため

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

：私が使用ProvidePluginオプションのhttps://webpack.js.org/guides/shimming/#scripts-loader

ました：

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

どちらhighcharts-ngのは仕事にしようとしたとき、それはを作成することはできませんので、それがエラーを取得する意味、働いていました10：

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

Answer 1

使用expose-loaderとHighchartsグローバル変数の最初の使用の前にどこかrequire('expose-loader?Highcharts!highcharts');を書く：

TypeError: Cannot read property 'Chart' of undefined 

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

は、ここに私の角度モジュール

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 

私のWebPACKの設定です。これにはハイチャートが必要で、ブラウザにwindow.Highchartsというように公開してください。 ベンダー：[ '角度'、 'highcharts'、 'highcharts-ngの']、 私は私のベンダーバンドルにhighchartsを追加した

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

/***/ }