Tải tệp JS bên ngoài bằng Gatsby

Trong quy trình phát triển Web JavaScript hiện đại, việc cài đặt JavaScript thông qua các gói npm khá phổ biến.

Tuy nhiên, đôi khi chúng ta phải bao gồm một tệp JavaScript bên ngoài và các công cụ hiện đại có thể gây khó khăn một chút cho việc này.

Đặc biệt, tôi có nhu cầu đưa một video từ Wistia vào trang web của mình và sau khi xem nhanh, mọi thứ trông khá phức tạp hơn tôi muốn.

Wistia đã cho tôi đoạn mã HTML này để nhúng:

<script src="https://fast.wistia.com/embed/medias/VIDEOURL.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_VIDEOURL seo=false videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/VIDEOURL/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>

Trên một trang web HTML “bình thường”, có thể được xây dựng bằng Hugo như tôi thường làm, nó sẽ rất đơn giản.

Tôi chỉ cần thêm mã này vào trang của tôi.

Nhưng trong trang Gatsby, đâu là thành phần React?

Tôi đã xem xét một số plugin nhưng không ai thực sự làm được những gì tôi muốn.

Giải pháp có lẽ hơi “hacky”, nhưng hoạt động như một sự quyến rũ và tôi vẫn cảm thấy mình kiểm soát được những gì đang xảy ra.

Tôi đã thêm mã HTML dưới dạng JSX, chuyển đổi đúng cách tất cả các thuộc tính HTML:class -> className,aria-hidden -> ariaHiddenvà các kiểu - sử dụng một công cụ nhưhttps://magic.reactjs.net/htmltojsx.htmđể làm cho nó nhanh chóng.

Sau đó, tôi đã thêm mã này vàogatsby-browser.jstệp để thêm các tập lệnh tôi cần, khi tải trang:

const addScript = url => {
  const script = document.createElement("script")
  script.src = url
  script.async = true
  document.body.appendChild(script)
}

export const onClientEntry = () => { window.onload = () => { addScript(https://fast.wistia.com/embed/medias/9rvl8vgrzg.jsonp) addScript(https://fast.wistia.com/assets/external/E-v1.js) } }

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: