JavaScript动态导入

去年年初,有人提议将动态导入引入JavaScript。 如果没有人知道,JavaScript现在仅支持静态导入,这是有原因的,但这是另一个讨论的主题。 该建议已实施,并包含在即将发布的ECMAScript更新列表中。 版本63的Google Chrome已经支持此功能。 我会告诉你它是什么以及它可以在什么地方派上用场。


动态导入的使用方式与静态导入的使用方式几乎相同,但是有几个主要区别:


语法动态导入类似于函数调用:import('path / to / module.js');


import('path / to / file.js')命令返回Promise,它将在模块本身被拉起并直接安装及其所有依赖项后进入实现状态。 这意味着我们可以这样写:


import('path/to/module.js') .then(module => { module.loadPageInto(main); }) .catch(err => { main.textContent = err.message; }); 

甚至像这样:


 const module = await import('path/to/module.js'); 

重要说明:尽管动态导入是句法的,并且看起来像是对import()的调用,但它不是函数。 它不是从Function.prototype继承的,这意味着不能通过调用或应用来调用它。


动态导入有很多应用程序,require.js长期以来与webpack有着相似的机会,如果我也没记错的话,那么你们中的许多人可能已经使用了很长时间了。 现在将有可能在本地执行此操作。 但是另一方面,在运行时可以根据条件动态导入的功能也为更多混乱的代码提供了位置,尽管我知道您可以在任何东西上贴上不好的代码,但这不是工具。 在评论中写下您的意见,您如何看待动态导入。


您可以阅读更多内容并在此处查看:
https://github.com/tc39/proposal-dynamic-import
https://developers.google.com/web/updates/2017/11/dynamic-import
https://www.youtube.com/watch?v=eg8eLH52d4s&t=31s

Source: https://habr.com/ru/post/zh-CN455200/


All Articles