找不到带有 javascript_pack_tag(Webpacker) 的 application.js答案

【问题标题】：Can't find application.js with javascript_pack_tag(Webpacker)找不到带有 javascript_pack_tag(Webpacker) 的 application.js
【发布时间】：2019-10-14 21:54:15
【问题描述】：

我已经在我的 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

进入它。

毕竟在某些视图中（例如 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 将application.js 转换为 HTML 中的application-5e96d8f9533313f79af6.js（带有这些数字），这是从哪里来的？

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

任何参考将不胜感激

【问题讨论】：

标签： javascript ruby-on-rails webpack

【解决方案1】：

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

//= require 指令用于 sprockets（又名资产管道），在 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'

【讨论】：

感谢您的广泛回答，但是有没有办法从供应商中的 bower_components 文件夹中导入 jquery 和其他内容？我使用 bower-away 删除了 bower，它允许 Webpacker 读取其依赖项并使用 yarn 安装它。还是需要添加插件才能使 webpacker 正常工作？