导入语句是否替换了javascript中的脚本标签？答案

【问题标题】：Are import statements replacing script tags in javascript?导入语句是否替换了javascript中的脚本标签？
【发布时间】：2019-08-03 19:42:56
【问题描述】：

import something from './something'

对

<script src='https://code.jquery.com/jquery-3.4.1.js'></script>

当我可以使用远程 CDN 或使用本地文件和脚本标签时，我个人发现 npm 安装和使用模块/编译有点麻烦。但我想知道 javascript 是否正在转向 import 语句或脚本标签是否会保留？

库提供者是否正在转向只使用 npm，或者他们的库是否也有办法只 src 单个脚本文件？他们需要同时支持两者吗？

【问题讨论】：

它们没有可比性。它们有不同的功能，服务于不同的目的
两者都可用，两者都将可用。模块更好，部分原因是它们更新。它们提供了更好的封装和其他一些特性。但脚本标签仍然存在，而且极不可能消失。
@VLAZ 导入是否总是需要编译？
Not necessarily 但这在 IE 中不起作用。

标签： javascript

【解决方案1】：

一个初始的<script>标签是必要的——也就是说，你的

import something from './something'

也必须在（模块化）<script> 中。所以，至少，<script> 标签永远不会完全消失。

使用import 的最大问题是它需要浏览器理解语法。 JS 模块不再是最前沿的，但它们也不是在所有地方都受支持。见MDN's compatibility tables。完全不支持 IE（当然），仅支持 Chrome 61+（2017 年底发布），其他现代浏览器在大致相似的时间段内支持它。一旦您可以依靠所有用户，您希望您的网站可以使用支持 import 的浏览器，切换到 import 而不是导入库或另一个 <script> 标记是一个选项.否则，那些使用旧版浏览器的人将无法使用您的网站，而且那些不兼容的浏览器可能需要很多年才能消亡。

这最终取决于您 - 这是使用 import 语法的（非常轻微的）便利性与使用旧浏览器的用户使用您的网站的能力之间的权衡。

不过，还有其他事情需要考虑。库的每个import 和带有src 的每个<script> 标签都意味着多一个网络请求，这意味着在站点完全正常运行之前需要更多的加载时间。如果您希望最小化网络请求的数量（这对于使用移动设备或连接不良的用户来说非常重要，当连接超过 http/1.1 时），您必须将 all将 Javascript 放入单个文件中，然后发送给客户端。这可以通过像 Webpack 这样的模块捆绑器来完成。

（如果您想加倍努力并将所有内容放入单个内联<script>，这样只需来自客户端的单个请求即可加载整个页面及其功能，这也是一种选择——这种事情经常在大型网站上看到）

只要您的脚本编写包含构建过程（对于任何专业且重要的事情，它可能应该包含构建过程 - 它允许您使用该语言的最新和最好的版本进行编写，同时仍然允许过时的浏览器理解您的代码），我认为您也可以使用 NPM 在本地安装库并将它们捆绑在一起。一旦您了解了该工具，它就没有任何缺点。

【讨论】：