js kitaplığı içe aktarma veya html <script> etiketi

Question

ile başvuru arasındaki fark nedir? Şu anda web js ile reaktif js ile çalışıyorum. Ben yeni ve ithalat bağımlılıkları hakkında bir sorum var. Geleneksel olarak, genellikle bir üçüncü taraf kitaplığını html olarak <script> etiketinden içe aktarırız. Şimdi kodu aşağıdan çalıştırarak javascript içinde yapabilirim. Bu iki yaklaşım arasındaki farkın ne olduğunu merak ediyorum. Aynı ad alanına içe aktarılsınlar mı? Başka bir fark var mı?

import $ from 'jquery' 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import load from 'little-loader'; 

Answer 1

Sen WebPack bir <script> etiketi aracılığıyla dahil bir JS dosyası oluşturur göreceksiniz. Bu "paketlenmiş" dosyadır. Sayfada her zaman bir <script> etiketiniz var.

Webpack/Browserify/etc. Bunu yapmak için birkaç farklı JS dosyası alıp, bir <script> etiketi aracılığıyla yüklemek için bir JS dosyasına birleştiriyorlar. Yani bu:

<script src="jquery.js" type="text/javascript"></script> 
<script src="app.js" type="text/javascript"></script> 

... Bu olur:

<script src="bundle.js" type="text/javascript"></script> 

jQuery ve tüm app.js kod bundle.js dosya içindeki şimdi. Webpack, her şeyin doğru sırada olduğundan emin olur, böylece jQuery, app.js kodundan önce çalışır. Yani bu çizgi var nedeni şudur:

import $ from 'jquery' 

... ya ECMAScript'te 5: Bu jQuery bağlıdır bundler söyler

var $ = require('jquery'); 

, bu yüzden yapabilir emin 1) dahildir ve 2) doğru sırada yer almaktadır.