在瀏覽器中運用ES6的模塊功用 import 及 export

2019年8月24日 224次阅读 来源: zgj233

謝謝英文原作者 Jake Archibald 的手藝分享

各個瀏覽器關於ES6模塊 import 、 export的支撐狀況

  • Safari 10.1.
  • Chrome 61.
  • Firefox 54 – behind the dom.moduleScripts.enabled setting in about:config.
  • Edge 16.

《在瀏覽器中運用ES6的模塊功用 import 及 export》

ES6 import 和 export 在瀏覽器當中的運用

1.顯現聲明type=”module”

script 內里要加 type=”module”, 如許瀏覽器才會把相干的代碼看成ES6的module 來看待

<script type="module"> 
    import {addTextToBody} from './utils.js'; 
    addTextToBody('Modules are pretty cool.'); 
</script>

2.不能寫“裸”途徑如：

<script type="module"> 
    import {addTextToBody} from 'utils.js';  // error
    addTextToBody('Modules are pretty cool.'); 
</script>

直接寫 ‘utils.js’ 會報錯
你能夠寫絕對途徑和相對途徑， 然則不能直接寫文件名，縱然是統一層級下面的文件。也要加上 ‘./name.js’
文件名後綴 .js 必須要有，不然瀏覽器沒法辨認途徑。

3.怎樣向下兼容

運用 “nomodule” 關鍵字來完成瀏覽器的向下兼容

<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

我是如許邃曉的，老的瀏覽器自身不會辨認type=”module” js，也就不會去有實行有type=”module” 的js代碼（然則照樣會下載的哈）。
也不辨認 nomodule 關鍵字，所以它會疏忽nomodule，即一般實行這個有nomodule標識的js。
而支撐type=“module”的瀏覽器，它會自動不去實行有nomodule關鍵字的js。以至連下都不去下載。
所以向下兼容的功用就走通了（這個大家用差別的瀏覽器嘗嘗，馬上能夠邃曉）

唯一的題目，另有一類瀏覽器，它支撐 type=”module” 的 ES6特徵，然則它不支撐nomodule關鍵字。也就是說，縱然有nomodule標識，它照樣會去下載而且實行這個js。縱然它已實行了 type=“module”的 js。
這些瀏覽器有

  • Firefox doesn’t support nomodule (issue). Fixed in Firefox nightly!
  • Edge doesn’t support nomodule (issue). Fixed in Edge 16!
  • Safari 10.1 doesn’t support nomodule. Fixed in Safari 11!

4.默許加載體式格局

type=“module”的加載體式格局默許運用 defer的加載體式格局。

關於defer 和 async ：defer和async 都是異步加載代碼。然則defer要比及全部頁面在內存中一般襯着完畢（DOM 構造完整天生，以及其他劇本實行完成），才會實行。 async一旦下載完，襯着引擎就會中綴襯着，實行這個劇本今後，再繼承襯着。 一句話，defer是“襯着完再實行”，async是“下載完就實行”。別的，假如有多個defer劇本，會根據它們在頁面湧現的遞次加載，而多個async劇本是不能保證加載遞次的。

<!-- This script will execute after… -->
<script type="module" src="1.js"></script>

<!-- …this script… -->
<script src="2.js"></script>

<!-- …but before this script. -->
<script defer src="3.js"></script>

內聯的 <script> 也是採納的 defer加載形式

<!-- This script will execute after… -->
<script type="module">
  addTextToBody("Inline module executed");
</script>

<!-- …this script… -->
<script src="1.js"></script>

<!-- …and this script… -->
<script>     //這裏默許採納defer，防止歧義，發起手動加上
  addTextToBody("Inline script executed");
</script>

<!-- …but before this script. -->
<script defer src="2.js"></script>

而假如是傳統的script 內聯js，挪用的誰人js文件在後面的話，會報錯。

<!-- This script will throw error… -->
<script defer>     //這裏就算採納defer也會報錯
  addTextToBody("Inline module executed");
</script>

<script>     
  addTextToBody("Inline script executed");
</script>

5.支撐async的加載體式格局

type=”module” 也能夠運用 async 的體式格局舉行加載(包含其內聯的 import)，同等一般 js 採納 async 舉行加載的體式格局

<script type="module" async></script>

Browser issues
Firefox doesn’t support async on inline module scripts (issue)

6.只實行一次

<script type=”module”> 只實行一次同ES6的加載機制，屢次import 只會被當做一次import處置懲罰

<!-- 1.js 只會被加載實行一次-->
<script type="module" src="1.js"></script>
<script type="module" src="1.js"></script>
<script type="module">
  import "./1.js";
</script>

<!--  一般JS 也只會被加載一次，然則會被實行屢次-->
<script src="2.js"></script>
<script src="2.js"></script>

Browser issues
Edge executes modules multiple times (issue). Fixed, but not yet shipped (expect Edge 17 to ship with the fix).

7.關於CORS

type=”module” 默許不支撐跨域，這一點兒與傳統js或圖片完整不一樣。傳統js或圖片默許就是支撐跨域的。假如你想 type=”module” 支撐跨域。須要在從服務器返回的header上顯現的賦予有用的 CORS聲明

Access-Control-Allow-Origin: *

Browser issues
Firefox fails to load the demo page (issue).
Edge loads module scripts without CORS headers (issue). Fixed in Edge 16!

9.Mime-types

差別於傳統的 <scripts>, <script type=”module”> 必需向瀏覽器供應有用的 javascript MIME types。
不然要求到的模塊javascript不會實行
《在瀏覽器中運用ES6的模塊功用 import 及 export》

Browser issues
Edge executes scripts with invalid MIME types (issue).

末了還想說

沒想到任何一個小功用，細緻去研討都有這麼多的知識點。碼文不容易，列位給個贊可好。
轉載請說明出處
    原文作者：zgj233
    原文地址: https://segmentfault.com/a/1190000014342718
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞