javascript - 无法使用 javascript_pack_tag(Webpacker) 找到 application.js

Question

我已经在 Rails 应用中安装了 Webpacker gem，但并不真正知道如何将 app.js 文件包含到 app/javascript/packs 文件夹中。

我放

<%= javascript_pack_tag 'application' %>

进入我的application.html.erb布局和

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

进入其中。

毕竟在某些 View (例如index.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 中)，但不太确定如何包含要与 Webpacker 一起使用的 Bower 组件。

如有任何引用，我们将不胜感激

Answer 1

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

//= require 指令用于链轮(又名 Assets 管道)，在 webpacker 中您应该使用 javascript 导入(或在配置中使用 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'