Question

我使用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) ....

Answer 1

试试这个：

npm install highcharts

我遇到的这种方法的问题是在高级图表中使用其他模块，例如highcharts-more，map等。为了解决这个问题，我导入了highcharts以及其他所需的模块：

import highcharts from 'highcharts';
import highchartsMore from 'highcharts-more';
highchartsMore(highcharts);

Answer 2

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

import highcharts from "commonjs-highcharts"

为我工作。

Answer 3

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

Answer 4

尝试各种变体：

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

适合我。

Answer 5

这就是我使用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()都可以使用。

希望这会有所帮助！

Answer 6

您不需要在Webpack配置文件中进行任何额外的插件或修改。只需执行以下步骤：

使用以下方法为高图安装打字文件：

npm install --save @types/highcharts

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

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

Answer 7

对我而言，仅此方法适用于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'
}

Answer 8

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

import highcharts from 'highcharts-release';

Answer 9

我正在与AngulrJS，ES6，Webpack和Babel合作。我花了一段时间才找到它，但我最终在高潮图上使用了曝光。

这就是我所做的：

npm install highcharts --save

import 'expose?highcharts!highcharts/highcharts';

仅导入如图所示，不需要任何其他内容。

然后您可以在控制器中简单地使用高图（不添加它作为依赖项）

Answer 10

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

如何使用webpack和babel导入highcharts

10 个答案: