webpacker와 함께 HTML 내 자바 스크립트를 사용하는 올바른 방법은 무엇입니까?

정적 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] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

자바 스크립트와 함께 Promise.reject를 사용하는 올바른 방법은 무엇입니까?

내장 된 자바 스크립트 함수를 사용자 정의하는 방법은 무엇입니까?

암호 및 다른 포트와 함께 sshpass를 올바르게 사용하는 방법은 무엇입니까?

몽구스와 함께 블루 버드를 사용하는 올바른 방법은 무엇입니까?

배열 인덱스와 함께 if 문에서 JRadioButton을 사용하는 올바른 방법은 무엇입니까?

CocoaPods와 함께 설치된 라이브러리를 사용하는 올바른 방법은 무엇입니까?

express.js와 함께 connect-multiparty를 사용하는 올바른 방법은 무엇입니까?

SqlAlchemy와 함께 (Postgres)에서 distinct를 사용하는 올바른 방법은 무엇입니까?

Spring Data Repositories와 함께 CascadeType.MERGE를 사용하는 올바른 방법은 무엇입니까?

Spring Data Repositories와 함께 CascadeType.MERGE를 사용하는 올바른 방법은 무엇입니까?

withRouter와 함께 forwardRef를 사용하는 올바른 방법은 무엇입니까

Spring Data Repositories와 함께 CascadeType.MERGE를 사용하는 올바른 방법은 무엇입니까?

Cordova와 함께 localForage를 사용하는 올바른 방법은 무엇입니까?

Link 및 <a>에 대해 Next.js와 함께 ref를 사용하는 올바른 방법은 무엇입니까?

gulp와 함께 sharp를 사용하는 올바른 방법은 무엇입니까?

독립적으로 업데이트 된 서비스와 함께 Docker 스택 배포를 사용하는 올바른 / 더 나은 방법은 무엇입니까?

순수 자바 스크립트 함수에서 네임 스페이스와 함께 i18next를 사용하는 방법은 무엇입니까?

이 자바 스크립트 함수를 작성하는 올바른 방법은 무엇입니까?

ionic4 및 커패시터와 함께 타사 자바 스크립트 라이브러리를 사용하는 방법은 무엇입니까?

동일한 ID를 가진 여러 elememts와 함께 자바 스크립트를 사용하는 방법은 무엇입니까?

자바 스크립트에서 getJSON 함수를 올바르게 사용하는 방법은 무엇입니까?

다른 자바 스크립트 함수 내에서 자바 스크립트 변수를 전달하는 방법은 무엇입니까?

Google 사이트에서 HTML에 자바 스크립트를 포함하는 방법은 무엇입니까?

토글 제거 코드와 함께 자바 스크립트 변수를 사용하는 방법은 무엇입니까?

자바 스크립트에서 Rails asset_path와 함께 동적 가치를 사용하는 방법은 무엇입니까?

클라이언트 및 서버에서 OpenTelemetry 수집기와 함께 OpenTelemetry 내보내기를 올바르게 사용하는 방법은 무엇입니까?

자바 스크립트에서 클로저를 사용하여 함수 내 다른 범위의 변수에 액세스하는 방법은 무엇입니까?

자바 스크립트에서 함수 내부에 함수를 정의하는 방법은 무엇입니까?

HTML 마크 업 전에 자바 스크립트 함수를로드하는 방법은 무엇입니까?

TOP 리스트

  1. 1

    Ionic 2 로더가 적시에 표시되지 않음

  2. 2

    JSoup javax.net.ssl.SSLHandshakeException : <url>과 일치하는 주체 대체 DNS 이름이 없습니다.

  3. 3

    std :: regex의 일관성없는 동작

  4. 4

    Xcode10 유효성 검사 : 이미지에 투명성이 없지만 여전히 수락되지 않습니까?

  5. 5

    java.lang.UnsatisfiedLinkError : 지정된 모듈을 찾을 수 없습니다

  6. 6

    rclone으로 원격 디렉토리의 모든 파일을 삭제하는 방법은 무엇입니까?

  7. 7

    상황에 맞는 메뉴 색상

  8. 8

    SMTPException : 전송 연결에서 데이터를 읽을 수 없음 : net_io_connectionclosed

  9. 9

    정점 셰이더에서 카메라에서 개체까지의 XY 거리

  10. 10

    Windows cmd를 통해 Anaconda 환경에서 Python 스크립트 실행

  11. 11

    다음 컨트롤이 추가되었지만 사용할 수 없습니다.

  12. 12

    C #에서 'System.DBNull'형식의 개체를 'System.String'형식으로 캐스팅 할 수 없습니다.

  13. 13

    JNDI를 사용하여 Spring Boot에서 다중 데이터 소스 구성

  14. 14

    Cassandra에서 버전이 지정된 계층의 효율적인 모델링

  15. 15

    복사 / 붙여 넣기 비활성화

  16. 16

    Android Kotlin은 다른 활동에서 함수를 호출합니다.

  17. 17

    Google Play Console에서 '예기치 않은 오류가 발생했습니다. 나중에 다시 시도해주세요. (7100000)'오류를 수정하는 방법은 무엇입니까?

  18. 18

    SQL Server-현명한 데이터 문제 받기

  19. 19

    Seaborn에서 축 제목 숨기기

  20. 20

    ArrayBufferLike의 typescript 정의의 깊은 의미

  21. 21

    Kubernetes Horizontal Pod Autoscaler (HPA) 테스트

뜨겁다태그

보관