web-dev-qa-db-ja.com

webpackとbabelでハイチャートをインポートする方法

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

Npmでhighchartsをインストールしました（公式のhighcharts npmリポジトリを使用することを好みます）：

npm install highcharts-release --save

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

import highcharts from 'highcharts';

Webpack importを介してHighchartsをインポートするにはどうすればよいですか？ webpack.config.jsの例（またはプラグインを構成する他の方法）を投稿できますか？

ありがとう。

[〜＃〜]編集[〜＃〜]

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

Uncaught Error: Cannot find module "highcharts" webpackMissingModule @ review-chart.js:2(anonymous function) ....
javascripthighchartsecmascript-6webpackes6-module-loader
11
Shai M.

それを解決するcommonjs-highchartsと呼ばれるNPMがあります。ただ走れ npm i commonjs-highchartsそしてそれをインポートします：

import highcharts from "commonjs-highcharts"

私のために働いた。

5
Andrey Bukati

これを試して：

npm install highcharts

このアプローチで直面した問題は、highcharts-more、mapなど、highchartsで他のモジュールを使用することです。これを克服するために、highchartsと他の必要なモジュールを次のようにインポートしました。

import highcharts from 'highcharts';
import highchartsMore from 'highcharts-more';
highchartsMore(highcharts);
11
Amith M S

次のバリエーションを試してください。

require('expose?Highcharts!highcharts');
require('highcharts/modules/map')(Highcharts);
require('highcharts/highcharts-more')(Highcharts);
require('expose?Highcharts!highcharts/highstock');

./node_modules/highcharts/...を歩き回ると、必要なモジュールやライブラリに試行錯誤できる可能性があります。

フォームを使うのは楽しいことではありません

$('myselector').highcharts(...)

それらをで置き換える

Highcharts.chart('myselector', ...)

私のために働きます。

2
John Mee

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

2
geoffberger

これが、Webpackv4.16.5とHighchartsv5.0.11を使用して解決した方法です。

webpack.config

_module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: [{
        loader: 'babel-loader'
      }]
    },
    {
      test: /highcharts.*/,
      loader: 'imports-loader?window=>global&window.jQuery=>$'
    }
    // ...
  ],
  alias: {
    jquery: 'jquery/jquery'
    // ...
  }
},
externals: {
  jQuery: 'jQuery'
},
plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
    Highcharts: 'highcharts/highcharts'
    // ...
  })
]
_

main.jsの最初のオプション

_import addMore from 'highcharts/highcharts-more'
import addExporting from 'highcharts/modules/exporting'
import addOfflineExporting from 'highcharts/modules/offline-exporting'
import addSolidGauge from 'highcharts/modules/solid-gauge'
import addDrilldown from 'highcharts/modules/drilldown'
import addTreemap from 'highcharts/modules/treemap'
import addFunnel from 'highcharts/modules/funnel'

addMore(Highcharts)
addExporting(Highcharts)
addOfflineExporting(Highcharts)
addSolidGauge(Highcharts)
addDrilldown(Highcharts)
addTreemap(Highcharts)
addFunnel(Highcharts)
_

main.js 2番目のオプション：

_require('highcharts/highcharts-more')(Highcharts)
require('highcharts/modules/exporting')(Highcharts)
require('highcharts/modules/offline-exporting')(Highcharts)
require('highcharts/modules/solid-gauge')(Highcharts)
require('highcharts/modules/drilldown')(Highcharts)
require('highcharts/modules/treemap')(Highcharts)
require('highcharts/modules/funnel')(Highcharts)
_

このように、$(..).highcharts()とHighcharts.chart()の両方を使用できます。

お役に立てれば！

1
kylo

私にとって、このメソッドだけがwebpackで機能しています（そしてbrowserifyでも機能していました）：

global.js

import $ from 'jquery';

global.$ = global.jQuery = $;

app.js

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

理由はわかりませんwebpack.ProvidePluginはAngularJSで正常に機能しますが、highchartsでは機能しません。

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

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'
}
1
ViES

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

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

_npm install --save @types/highcharts_

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

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

1
Umang Khandelwal

npm installで使用されているパッケージ名を使用してみてください。

import highcharts from 'highcharts-release';

0
Alastair
import Highcharts from 'highcharts';
import 'highcharts-ng'  //add this line if you wish to use highcharts angular directive

そして、webpack.config.jsに新しいルールを追加します

{
   test: require.resolve('highcharts'),
   use:[{
        loader: 'expose-loader',
        options: 'Highcharts'
   }]
}
0
Stone

私はAngulrJS、ES6、Webpack、Babelを使用しています。それを見つけるのに少し時間がかかりましたが、highchartでexposeを使用することになりました。

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

npm install highcharts --save

import 'expose?highcharts!highcharts/highcharts';

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

次に、コントローラーでhighchartを簡単に使用できます（依存関係として追加する必要はありません）

0
omer