如何将 Javascript 模块从外部 javascript 文件导入 HTML 文件的 <script> 标记答案

【问题标题】：How to Import Javascript Module from external javascript file into <script> tag of HTML file如何将 Javascript 模块从外部 javascript 文件导入 HTML 文件的 <script> 标记
【发布时间】：2020-10-28 04:38:16
【问题描述】：

我正在尝试从我的 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 文件，you can refer this

提前感谢您的帮助:)

【问题讨论】：

我希望第一种方法会失败并显示明显的错误消息，而后一种方法可以正常工作。你如何确定它不起作用？你有什么不做调试的？控制台上是否列出了错误？网络选项卡是否显示成功加载了您期望的内容而不是 HTTP 错误？

标签： javascript html typescript figma figma-api

【解决方案1】：

将type="module" 添加到脚本标签。它会起作用的。

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

【讨论】：

【解决方案2】：

要么使用<script type="module"> 导入模块（参见compatibility chart）...

或者，对于 IE 和其他旧浏览器的支持，使用 Babel 或类似的并将所有 JS 编译成单个、缩小且与 ES5 兼容（旧 javascript）文件。

【讨论】：

投反对票的人能否解释一下我的回答有什么问题？

【解决方案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'
}

&lt;script src="script.js"&gt;&lt;/script&gt;

【讨论】：