【发布时间】：2019-07-26 12:42:00
【问题描述】：
我正在尝试在 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 文件中，并且可以从网页访问（即我可以在浏览器的开发人员工具中加载 app.js 文件，并搜索文件显示来自 Highcharts 7.1.2 的代码）。
我还尝试将app.js 中的require/import 行格式化为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：
- 将路由和控制器设置为静态页面；
- 将以下内容添加到 environment.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';添加到app/javascript/packs/application.js - 将 Highcharts 文档中的 HTML 模板添加到 application_layout.html 页面。
而且，在这样做之后，我得到了完全相同的错误。我错过了什么？
【问题讨论】：
-
document.addEventListener('DOMContentLoaded', function () {之前这行你能改吗var highChart = Highcharts.new然后`var myChart = highChart.chart('chart', { `
标签： javascript ruby-on-rails webpack highcharts webpacker