找不到应用程序.js javascript_pack_tag(Webpacker)

Question

我已经在我的Rails应用程序中安装了Webpacker gem，但实际上不知道如何将app.js文件包含在app/javascript/packs文件夹中。

我把

<%= javascript_pack_tag 'application' %>

到我的应用程序中.html.erb 布局和

//= require jquery/dist/jquery
//= require jquery-ui/ui/jquery-ui
//= require jquery-ujs

进去。

毕竟在某些视图中(例如索引.html.erb(我在脚本标签中有一些jQuery：

<script>
  jQuery(document).ready(function(){...

当我刷新页面并在控制台中查看时，我得到：

GET http://localhost:3000/packs/application-5e96d8f9533313f79af6.js net::ERR_ABORTED 500 (Internal Server Error)

和

Uncaught ReferenceError: jQuery is not defined

问题是为什么javascript_pack_tag在HTML中将application.js转换为application-5e96d8f9533313f79af6.js(带有这些数字(，从何而来？

另外，我提到我正在将我的应用程序从Bower转换为Webpack(在Webpacker gem中(，并且不确定如何包含我的Bower组件以与Webpacker一起使用。

任何参考将不胜感激

Answer 1

包名称中的那些数字是正常的，它是文件摘要，链轮在生产中也这样做(它用于缓存破坏并确保客户端上的正确代码(。

//= require指令是针对链轮(又名资产管道(的，在Webpacker中，您应该使用JavaScript导入(或在config中使用webpack.ProvidePlugin，以便在使用时自动加载jQuery标识符(。

此外，您还必须切换到 npm 依赖项 - yarn add jquery jquery-ui jquery-ujs

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery'",
        "window.$": "jquery"
    })
  ]

并使用单独的导入(在每个文件导入中，那里使用的内容就像没有其他文件一样，webpack 将处理重复项(：

import $ from 'jquery';
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/themes/base/selectable.css';
import 'jquery-ui/ui/core';
import 'jquery-ui/ui/widgets/selectable'; // and so on
import {} from 'jquery-ujs'