如何使用 webpack 和 babel 导入 highcharts答案

【问题标题】：how to import highcharts with webpack and babel如何使用 webpack 和 babel 导入 highcharts
【发布时间】：2016-01-19 09:22:14
【问题描述】：

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

【问题讨论】：

“没有按预期工作”您期望什么以及会发生什么？
那么如果导入成功的话，是什么问题呢？
我的意思是我希望导入成功，但导入失败并出现异常
我在 Highcharts 页面上问过同样的关于 Browserify 的问题：stackoverflow.com/questions/33241358/…
@aioko 感谢您的解决方法，我知道它可以通过这种方式解决，但它让我觉得这是一个 hack :) 如果我理解正确，highcharts 不应该再依赖 jQuery 了吗？还是我错了？我使用的是 4.2.2 版本，但我没有使用 jspm/systemjs 而不是 webpack：在 highchart 论坛上提问：forum.highcharts.com/highcharts-usage/…

标签： javascript highcharts ecmascript-6 webpack es6-module-loader

【解决方案1】：

试试这个：

npm install highcharts

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

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

【讨论】：

这对我有用。不过，你能解释一下为什么highchartsMore(highcharts);necessary？
如果您检查 highcharts/modules/map.src.js 文件，它会将 Highcharts 对象作为参数。

【解决方案2】：

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

import highcharts from "commonjs-highcharts"

为我工作。

【讨论】：

不适合我...（我的意思是，编译工作但我得到 $(...).highcharts 不是一个函数）似乎唯一可行的方法是使用一个要求。
好吧，我发现：BowerWebpackPlugin 有问题，不允许将 jQuery 公开为全局，highcharts 使用 window.jQuery...
commonjs-highcharts 最终（在敲了几个小时的键盘后）对我有用。如果不进行一些 webpack 配置以在全球范围内公开，就无法获得 highcharts-release 或任何其他愚蠢的工作
这将不再起作用。 Highcharts 变了，它的独立框架适配器被移除了，commonjs-highcharts 半年没更新了。

【解决方案3】：

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

【讨论】：

我没有加载 jQuery，因此我也想加载独立框架。我从 highcharts 收到“未捕获的类型错误：无法读取未定义的属性 'addEvent'”错误。
Highcharts 缺少 HighchartsAdapter。为此，一种方法是将 HighchartsAdapter 添加为插件。更具体地说，在 webpack.config.js 中，尝试在插件数组下添加new webpack.ProvidePlugin({ HighchartsAdapter: 'highcharts-release/adapters/standalone-framework'})。
还是不行。我在编译过程中没有任何错误，但是当我加载我的页面时我得到了Uncaught TypeError: $(...).highcharts is not a function。（如果我显示$.fn.highcharts 它是undefined）
@gtournie 你有没有想过这个问题。让 $(...).highcharts 工作时遇到同样的问题
@vernak2539 是的。首先，我使用“highcharts-release”包。然后我使用提供插件：new webpack.ProvidePlugin({ 'window.jQuery': 'jquery' })

【解决方案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', ...)

为我工作。

【讨论】：

【解决方案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() 都可以使用。

希望这会有所帮助！

【讨论】：

【解决方案6】：

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

使用这个为 highcharts 安装类型文件：

npm install --save @types/highcharts

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

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

【讨论】：

【解决方案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'
}

【讨论】：

您也可以使用webpack.ProvidePlugin 导入jQuery，并且只声明global.$ = global.jQuery = $。我不知道为什么，但 global.$ 声明不能通过 ProvidePlugin 工作。

【解决方案8】：

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

import highcharts from 'highcharts-release';

【讨论】：

安装成功了吗？文件是否在 node_modules 目录中？

【解决方案9】：

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

这就是我所做的：

npm install highcharts --save

import 'expose?highcharts!highcharts/highcharts';

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

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

【讨论】：

【解决方案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'
   }]
}

【讨论】：