정적 Boostrap 템플릿을 구현하려고 시도하면서 webpacker로 새로운 rails 5.2 프로젝트를 설정하고 있습니다. 그러나 Rails/webpacker를 사용하여 Boostrap 템플릿에서 HTML 내 자바스크립트를 포함하는 가장 좋은 방법이 무엇인지 잘 모르겠습니다.
나는 이미 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>
스 니펫에 대한 제안 사항이 있습니까?
우연히 고쳤습니다. jquery-migrate.min.js가 다음 모든 js가 작동하지 않는 문제를 일으킨 것으로 나타났습니다...
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다