是导入语句替换JavaScript中的脚本标签


import something from './something'

vers

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

我个人发现,当我只能使用远程CDN或与脚本标签一起使用本地文件时,NPM安装某些内容并使用模块/编译会有些麻烦。但是我想知道JavaScript是否正在朝着导入语句迈进,还是脚本标签会留下?

图书馆提供商是仅使用npm,还是它们的库也有办法仅使用单个脚本文件?他们需要两者支持吗?

无论如何,初始<script>标签都是必要的 - 也就是说,您的

import something from './something'

也必须在(模块化(<script>中。因此,至少<script>标签永远不会完全消失。

使用import的最大问题是它要求浏览器理解语法。JS模块不再是流血的边缘,但是它们在任何地方也不支持。请参阅MDN的兼容表。完全不支持IE(当然(,仅在Chrome 61 上支持(2017年底发布(,其他现代浏览器则在通常相似的时期内支持它。一旦您可以依靠所有用户,您希望您的站点可用来提供支持import的浏览器,切换到import,而不是导入库或其他<script> TAG是一个选项。否则,那些浏览器较旧的人将无法使用您的网站,并且那些不兼容的浏览器可能需要多年的时间才能消失。

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

不过,还有其他事情要考虑。库的每个import和带有src的每个<script>标签都意味着一个更多的网络请求,这意味着在网站充分发挥功能之前,这意味着更多的加载时间。如果您想最大程度地减少网络请求的数量(对于移动设备或连接不良的用户,连接超过http/1.1时可能非常重要(,则必须将JavaScript到发送给客户端的单个文件中。这可以使用WebPack等模块捆绑包来完成。

(如果您想额外的英里并将所有内容都放入一个内联<script>中,因此只有来自客户端的单个请求才能加载整个页面及其功能,那就是一个选项也是 - 这种事情经常在巨大的网站上看到(

只要您的脚本写入包括一个构建过程(对于任何专业和非平凡的过程,它可能应该使用它 - 它允许您写入最新,最出色的语言版本,同时仍然允许过时的浏览器理解您的代码(,我认为您也可以在本地使用NPM安装库,然后将它们捆绑在一起。一旦您了解了工具,它就没有任何缺点。

最新更新