我正在尝试在Rails 5.2/webpacker应用程序中使用Highcharts。(我是webpacker的新手，正在使用它，因为我们为基于webpack构建的应用程序采用了第三方主题。该主题现在正在完全发挥作用。当我在应用程序中包含Highcharts代码时，我没有收到任何图表，而是在控制台上出现错误：Uncaught ReferenceError: Highcharts is not defined at HTMLDocument.<anonymous>。不幸的是，我是webpacker的新手，JS并不是我的菜。
我已经按照Highcharts网站上的说明使用npm安装Highcharts(尽管我的系统正在使用yarn)，除了生成此错误之外，一切似乎都是正确的！
package.json：
{
...
"devDependencies": {
"webpack-dev-server": "^3.7.2"
},
"dependencies": {
"highcharts": "^7.1.2",
"webpack": "4.32.2",
"webpack-cli": "3.3.2",
...
}
}
config/webpack/environment.js：
const { environment } = require('@rails/webpacker');
...
const Highcharts = require("highcharts");
const webpack = require('webpack');
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
'$': 'jquery',
'window.$': 'jquery',
jQuery: "jquery",
jquery: "jquery",
"window.$": "jquery",
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
})
);
environment.loaders.append('expose', {
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}, {
loader: 'expose-loader',
options: 'jQuery'
}]
});
module.exports = environment;
app/javascripts/packs/app.js：
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)
import Highcharts from 'highcharts/modules/exporting';
import Rails from 'rails-ujs'
Rails.start()
import "../modules/bootstrap";
import "../modules/feather";
import "../modules/sidebar";
import "../modules/user-agent";
import "../modules/mask";
import "../modules/select2";
import "../modules/validation";
import '../scss/app.scss';
app/views/layouts/application.html.erb：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="preconnect" href="//fonts.gstatic.com/" crossorigin>
<title><%= full_title(yield(:title)) %></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= render 'layouts/shim' %>
<%= stylesheet_pack_tag 'app' %>
</head>
<body>
<%= render 'layouts/app_pages' %>
<%= javascript_pack_tag 'app' %>
</body>
</html>
页面模板(基本上直接来自Highcharts"您的第一个图表"页面)：
...
<div class="col-12 text-center" id="chart"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var myChart = Highcharts.chart('chart', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
...
我尝试更改导入模块的顺序(在顶部、末尾或中间)，但无济于事。Webpack 正在愉快地编译代码，并且在此过程中我多次重新启动 webpack-dev-server，以确保正在运行environment.js更改。我还确认Highcharts代码位于webpack发出的app.js文件中，并且可以从网页访问(即我可以在浏览器中的开发人员工具中加载应用程序.js文件，搜索该文件会显示Highcharts 7.1.2中的代码)。
我还尝试将require/import行的格式app.js格式化为require('highcharts/modules/exporting')(Highcharts);(如Highcharts文档中所示)和import 'highcharts/modules/exporting';(以匹配文件中的其他import行)，但它们都产生相同的结果 - 没有图表和Highcharts is not defined错误。
任何人都可以建议如何在网页上成功获取Highcharts生成的图表，而没有JS错误？
谢谢！
====编辑====
我尝试使用rails new test --webpack创建一个全新的 Rails 应用程序，执行yarn add highcharts，然后仅添加行以安装Highcharts：
- 将路由和控制器设置为静态页面;
- 将以下内容添加到环境.js：
const Highcharts = require("highcharts");
const webpack = require('webpack');
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
'$': 'jquery',
'window.$': 'jquery',
jQuery: "jquery",
jquery: "jquery",
"window.$": "jquery",
"window.jQuery": "jquery"
})
);
- 将
import Highcharts from 'highcharts/modules/exporting';添加到应用程序/JavaScript/Packs/应用程序.js - 将模板 HTML 从 Highcharts 文档添加到application_layout.html页面。
而且，这样做后，我得到完全相同的错误。我错过了什么？
答案是将window.Highcharts = Highcharts;添加到应用程序.js文件中以及import Highcharts from 'highcharts';行。
你能试试这样吗？因为之前可能不会加载高图表模块
var chart = new Highcharts.Chart({
});