如何將 Javascript 模塊從外部 javascript 文件導入<script> tag of HTML file

Question

我正在嘗試從我的 HTML 文件中名為 JSZip 的外部節點包中導入名為“JSZip”的模塊。

使用 import 命令直接導入它不起作用，

<script>    

     import JSZip from '../node_modules/jszip/dist/jszip.min.js';

</script>

我也嘗試將它導入到腳本標簽中的 HTML 文件中

<script type="text/javascript" src="node_modules/jszip/dist/jszip.min.js"></script>

但是上面的代碼仍然沒有導入模塊。

我知道如果我們直接在 javascript 文件中這樣做，這可以很容易地實現，但我正在為 figma 插件構建它，並且我被限制在 ui.html 文件上執行此操作，因為瀏覽器 API 只能在 html 端調用並且 js 文件在另一個沙箱環​​境中運行。

要閱讀更多關於 figma 插件的 ui 和 js 文件，你可以參考這個

在此先感謝您的幫助:)

Answer 1

將type="module"添加到腳本標記。 它會起作用。

 <script type="module"> import JSZip from '../node_modules/jszip/dist/jszip.min.js'; </script>

Answer 2

要么使用<script type="module">導入模塊（請參閱兼容性圖表）...

或者，對於 IE 和其他舊瀏覽器的支持，請使用Babel或類似工具並將您的所有 JS 編譯成一個單一的、縮小的且與 ES5 兼容（舊的 javascript）文件。

Answer 3

在這種情況下最好使用 webpack。 您可以獲得使用 js 導入的好處並為您的代碼創建小模塊。 但是當需要執行它時，wepback 會將所有這些轉換為一個單獨的 js 文件。

確保你有一個包含"type": "module"的package.json文件，並且在你的代碼中你可以使用import Foo from './Foo.js'導入其他 js 文件，而 js 文件具有export default { }

 // file - package.json { "type": "module" } // file - index.js import Foo from './Foo.js' Foo.start() // file - Foo.js export default { start () { console.log('start') } } // file - webpack.config.cjs return { target: 'web', entry: './index.js', output: './script.js' }

 <script src="script.js"></script>