在-HTML javascript 中使用 webpacker 的正确方法是什么？

Question

我正在使用 webpacker 建立一个新的 rails 5.2 项目，试图实现一个静态 Boostrap 模板。但是，我不确定将 Boostrap 模板中的 in-HTML javascript 包含在 rails/webpacker 中的最佳方法是什么。

我已经在 application.js 中包含 jQuery，但是，控制台一直显示 $ 未定义。

这是我的 app/javascript/packs/javascript.js:

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

console.log('Hello World from starter')

import '../css/theme.css'

//
// front basic
//

// <!-- JS Global Compulsory -->
import "jquery/dist/jquery.min.js"
import "jquery-migrate/dist/jquery-migrate.min.js"
import "bootstrap/dist/js/bootstrap.min.js"
import "popper.js/dist/umd/popper.min.js"

在我的 environment.js 中，我有：

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    JQuery: 'jquery',
    jquery: 'jquery',
    jQuery: 'jquery',
    'window.Tether': "tether",
    Popper: ['popper.js', 'default'], // for Bootstrap 4
  })
)

module.exports = environment

这里是我的 index.html.erb 错误“$ 未定义”：

<h1>Templates#starter</h1>
<p>Find me in app/views/templates/starter.html.erb</p>


<script type="text/javascript">
    $(window).on('load', function () { // not working
        // some more code
        console.log("????");
    });
</script>

对代码段有什么建议吗？

Answer 1

不小心修复了：结果是jquery-migrate.min.js导致以下所有js都不起作用的问题...

在-HTML javascript 中使用 webpacker 的正确方法是什么？

What is the correct way to use in-HTML javascript with webpacker?

jquery

ruby-on-rails

webpacker