如何使用 webpack 和 babel 导入 highcharts
how to import highcharts with webpack and babel
我使用 ES6、Babel 和 webpack 堆栈。
我已经通过 npm 安装了 highcharts(我更喜欢使用官方的 highcharts npm repo):
npm install highcharts-release --save
但是,常规导入 (ES6) 无法按预期工作:
import highcharts from 'highcharts';
如何通过 webpack import 导入 Highcharts?
你能 post 一个 webpack.config.js 示例(或其他配置插件的方式)吗?
谢谢。
编辑
错误是:
Uncaught Error: Cannot find module "highcharts" webpackMissingModule @ review-chart.js:2(anonymous function) ....
尝试使用 npm install
期间使用的包名称:
import highcharts from 'highcharts-release';
尝试npm install highcharts-release
。然后在您的 JavaScript 文件中执行 import Highcharts from 'highcharts-release/highcharts';
。可能有更好的方法,但这对我有用。
有一个名为 commonjs-highcharts 的 NPM 可以解决它。
只需 运行 npm i commonjs-highcharts
并导入它:
import highcharts from "commonjs-highcharts"
对我有用。
试试这个:
npm install highcharts
我遇到的问题是在 highcharts 中使用其他模块,例如 highcharts-more、map 等,为了克服这个问题,我导入了 highcharts 和其他所需的模块,如下所示:
import highcharts from 'highcharts';
import highchartsMore from 'highcharts-more';
highchartsMore(highcharts);
尝试变体:
require('expose?Highcharts!highcharts');
require('highcharts/modules/map')(Highcharts);
require('highcharts/highcharts-more')(Highcharts);
require('expose?Highcharts!highcharts/highstock');
如果您在 ./node_modules/highcharts/...
中四处闲逛,您也许可以反复试验进入您需要的模块 and/or 库。
我对使用表格没有任何兴趣
$('myselector').highcharts(...)
将它们替换为
Highcharts.chart('myselector', ...)
适合我。
我正在使用 AngulrJS、ES6、Webpack 和 Babel。我花了一段时间才找到它,但我最终在 highchart 上使用了 expose。
这就是我所做的:
npm install highcharts --save
import 'expose?highcharts!highcharts/highcharts';
只导入如图所示,不需要任何其他东西。
然后您可以在控制器中简单地使用 highchart(无需将其添加为依赖项)
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 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()
都可用。
希望对您有所帮助!
您不需要任何额外的插件或修改您的 webpack 配置文件。只需按照以下步骤操作:
使用这个为 highcharts 安装类型文件:
npm install --save @types/highcharts
将您的导入语句更改为以下内容:
import * as Highcharts from 'highcharts';
import HighchartsMore = require('highcharts/highcharts-more');
HighchartsMore(Highcharts);
对我来说只有这个方法适用于 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'
}
我使用 ES6、Babel 和 webpack 堆栈。
我已经通过 npm 安装了 highcharts(我更喜欢使用官方的 highcharts npm repo):
npm install highcharts-release --save
但是,常规导入 (ES6) 无法按预期工作:
import highcharts from 'highcharts';
如何通过 webpack import 导入 Highcharts? 你能 post 一个 webpack.config.js 示例(或其他配置插件的方式)吗?
谢谢。
编辑
错误是:
Uncaught Error: Cannot find module "highcharts" webpackMissingModule @ review-chart.js:2(anonymous function) ....
尝试使用 npm install
期间使用的包名称:
import highcharts from 'highcharts-release';
尝试npm install highcharts-release
。然后在您的 JavaScript 文件中执行 import Highcharts from 'highcharts-release/highcharts';
。可能有更好的方法,但这对我有用。
有一个名为 commonjs-highcharts 的 NPM 可以解决它。
只需 运行 npm i commonjs-highcharts
并导入它:
import highcharts from "commonjs-highcharts"
对我有用。
试试这个:
npm install highcharts
我遇到的问题是在 highcharts 中使用其他模块,例如 highcharts-more、map 等,为了克服这个问题,我导入了 highcharts 和其他所需的模块,如下所示:
import highcharts from 'highcharts';
import highchartsMore from 'highcharts-more';
highchartsMore(highcharts);
尝试变体:
require('expose?Highcharts!highcharts');
require('highcharts/modules/map')(Highcharts);
require('highcharts/highcharts-more')(Highcharts);
require('expose?Highcharts!highcharts/highstock');
如果您在 ./node_modules/highcharts/...
中四处闲逛,您也许可以反复试验进入您需要的模块 and/or 库。
我对使用表格没有任何兴趣
$('myselector').highcharts(...)
将它们替换为
Highcharts.chart('myselector', ...)
适合我。
我正在使用 AngulrJS、ES6、Webpack 和 Babel。我花了一段时间才找到它,但我最终在 highchart 上使用了 expose。
这就是我所做的:
npm install highcharts --save
import 'expose?highcharts!highcharts/highcharts';
只导入如图所示,不需要任何其他东西。
然后您可以在控制器中简单地使用 highchart(无需将其添加为依赖项)
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 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()
都可用。
希望对您有所帮助!
您不需要任何额外的插件或修改您的 webpack 配置文件。只需按照以下步骤操作:
使用这个为 highcharts 安装类型文件:
npm install --save @types/highcharts
将您的导入语句更改为以下内容:
import * as Highcharts from 'highcharts';
import HighchartsMore = require('highcharts/highcharts-more');
HighchartsMore(Highcharts);
对我来说只有这个方法适用于 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'
}