12

我使用 ES6、Babel 和 webpack 堆栈。

我已经通过 npm 安装了 highcharts（我更喜欢使用官方的 highcharts npm repo）：

npm install highcharts-release --save

但是，常规导入 (ES6) 无法按预期工作：

import highcharts from 'highcharts';

如何通过 webpack 导入导入 Highcharts？您可以发布一个 webpack.config.js 示例（或其他配置插件的方式）吗？

谢谢。

编辑

错误是：

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

10 回答 10

11

尝试这个：

npm install highcharts

我遇到这种方法的问题是在 highcharts 中使用其他模块，例如 highcharts-more、map 等，为了克服这个问题，我导入了 highcharts 和其他所需的模块，如下所示：

import highcharts from 'highcharts';
import highchartsMore from 'highcharts-more';
highchartsMore(highcharts);
于 2016-04-12T11:43:18.723 回答
5

有一个名为 commonjs-highcharts 的 NPM 可以解决这个问题。只需运行npm i commonjs-highcharts并导入它：

import highcharts from "commonjs-highcharts"

为我工作。

于 2015-10-25T09:23:43.353 回答
3

这就是我使用 Webpack v4.16.5 和 Highcharts v5.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 第二个选项：

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()可用。

希望这可以帮助！

于 2018-08-13T15:22:45.970 回答
2

尝试做一个npm install highcharts-release. 然后在您的 JavaScript 文件中执行import Highcharts from 'highcharts-release/highcharts';. 可能有更好的方法，但这对我有用。

于 2015-10-23T00:26:58.643 回答
2

尝试以下变体：

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', ...)

为我工作。

于 2016-11-02T05:01:15.503 回答
1

你不需要在你的 webpack 配置文件中添加任何额外的插件或修改。只需按照以下步骤操作：

使用以下方法为 highcharts 安装类型文件：

npm install --save @types/highcharts

将您的导入语句更改为以下内容：

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

于 2018-08-19T17:54:26.780 回答
1

对我来说，只有这种方法适用于 webpack（并且也适用于 browserify）：

global.js

import $ from 'jquery';

global.$ = global.jQuery = $;

应用程序.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'
}
于 2019-01-26T09:47:19.327 回答
0

我正在使用 AngulrJS、ES6、Webpack 和 Babel。我花了一段时间才找到它，但我最终在 highchart 上使用了expose。

这就是我所做的：

npm install highcharts --save

import 'expose?highcharts!highcharts/highcharts';

只导入如图所示，不需要任何其他东西。

然后您可以在控制器中简单地使用 highchart （无需将其添加为依赖项）

于 2018-01-28T15:49:08.163 回答
0

尝试使用以下期间使用的包名称npm install：

import highcharts from 'highcharts-release';

于 2015-10-21T07:53:06.010 回答
0 
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'
   }]
}
于 2018-04-22T18:59:11.670 回答