12

ES6、Babel、webpack スタックを使用しています。

npm でハイチャートをインストールしました (公式のハイチャート npm リポジトリを使用することを好みます):

npm install highcharts-release --save

ただし、通常のインポート (ES6) は期待どおりに機能しません。

import highcharts from 'highcharts';

Webpack インポートを介してハイチャートをインポートするにはどうすればよいですか? webpack.config.js の例 (またはプラグインを構成する他の方法) を投稿できますか?

ありがとう。

編集

エラーは次のとおりです。

Uncaught Error: Cannot find module "highcharts" webpackMissingModule @ review-chart.js:2(anonymous function) ....
4

10 に答える 10

5

それを解決する commonjs-highcharts という NPM があります。実行npm i commonjs-highchartsしてインポートするだけです：

import highcharts from "commonjs-highcharts"

私のために働いた。

于 2015-10-25T09:23:43.353 に答える
2

を実行してみてくださいnpm install highcharts-release。次に、JavaScript ファイルでimport Highcharts from 'highcharts-release/highcharts';. もっと良い方法があるかもしれませんが、それは私にとってはうまくいきました。

于 2015-10-23T00:26:58.643 に答える
1

私にとっては、このメソッドのみが webpack で機能しています (また、browserify でも機能していました):

global.js

import $ from 'jquery';

global.$ = global.jQuery = $;

app.js

import './globals';
import 'angular';
import 'highcharts';
// ...

では問題なく動作するのに、ではwebpack.ProvidePluginうまく動作しない理由がわかりません。AngularJShighcharts

私の設定は次のようになりました：

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery', // for using with AngularJS
    _: 'underscore',
    moment: 'moment'
})

// I've also tried this but without luck:
{
  test: require.resolve('highcharts'),
  loader: 'imports-loader?jQuery=jquery'
}
于 2019-01-26T09:47:19.327 に答える
1

webpack 構成ファイルに追加のプラグインや変更を加える必要はありません。次の手順に従ってください。

これを使用して、ハイチャート用のtypingsファイルをインストールします。

npm install --save @types/highcharts

import ステートメントを次のように変更します。

import * as Highcharts from 'highcharts'; import HighchartsMore = require('highcharts/highcharts-more'); HighchartsMore(Highcharts);

于 2018-08-19T17:54:26.780 に答える
0

中に使用されたパッケージ名を使用してみてくださいnpm install:

import highcharts from 'highcharts-release';

于 2015-10-21T07:53:06.010 に答える
0

私は AngulrJS、ES6、Webpack、および Babel を使用しています。それを見つけるのにしばらく時間がかかりましたが、ハイチャートで公開することになりました。

これは私がしたことです：

npm install highcharts --save

import 'expose?highcharts!highcharts/highcharts';

示されているようにインポートするだけで、他には必要ありません。

次に、コントローラーでハイチャートを簡単に使用できます（依存関係として追加せずに）

于 2018-01-28T15:49:08.163 に答える