type="module"你懂，但是type="importmap"你懂吗？趋势、学习途径等。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。当ES模块首次在ECMAScript2015中作为标准化JavaScript模块系统的方式引入时，它是通过在import语句中指定相对或绝对路径来实现的。从“https://cdn.skypack.dev/dayjs@1.10.7”导入dayjs；//ESmodulesconsole.log(dayjs("2019-01-25").format("YYYY-MM-DDTHH:mm:ssZ[Z]"));这与模块在其他常见模块系统（例如CommonJS）中的工作方式略有不同，并且在使用像webpack这样的模块捆绑器时语法更简单。constdayjs=require('dayjs')//CommonJSimportdayjsfrom'dayjs';//webpack导入说明符映射到特定（和版本）文档。用户只需在导入语句中应用裸模块说明符（通常是包名），模块解析相关的问题就会自动解决。由于开发人员已经熟悉这种从npm导入包的方式，因此需要一个构建步骤来确保以这种方式编写的代码能够在浏览器中运行。这个问题通过导入地图解决了。本质上，它允许将导入说明符映射到相对或绝对URL，这有助于在不应用构建步骤的情况下控制模块解析。导入地图的工作原理导入映射由在上面导入对象，每个属性对应一个映射。映射的左侧是导入说明符的名称，而右侧是说明符应映射到的相对或绝对URL。在映射中指定相对URL时，请确保它们始终以/、./或./开头。请注意，导入映射中包的存在并不意味着它一定会被浏览器加载。页面上脚本未使用的任何模块都不会被浏览器加载，即使它存在于导入映射中。您还可以在外部文件中指定映射，然后使用src属性链接到该文件（如上所示）。如果您决定使用这种方法，请务必在发送文件时将其Content-Type标头设置为application/importmap+json。请注意，出于性能原因，建议使用内联方法，本文其余部分的示例也将使用内联方法。指定映射后，可以在导入语句中使用导入说明符，如下所示需要注意的是，importmap中的映射不会影响这个方法允许我们导入指定路径中的任何模块而不是整个主模块，它导致浏览器下载所有组件模块。动态构建导入映射映射也可以根据任意条件在脚本中动态构建，该能力可用于基于特征检测有条件地导入模块。以下示例根据是否支持IntersectionObserverAPI选择正确的文件以在lazyload说明符下导入。如果要使用此方法，请确保创建并插入导入地图脚本标签（如上），因为修改现有的导入地图对象将无效。通过映射到哈希值提高脚本的可缓存性静态文件长期缓存的一种常用技术是在文件名中使用文件内容的哈希值，这样文件就一直保留在浏览器的缓存中，直到文件内容发生变化。发生这种情况时，该文件将获得一个新名称，以便最新更新立即反映在应用程序中。在捆绑脚本的传统方式中，如果更新多个模块依赖的依赖项，则此技术可能会导致问题。这将导致所有依赖于该依赖项的文件都被更新，迫使浏览器重新下载它们，即使代码中只有一个字符被更改。importmaps通过允许通过重映射技术单独更新每个依赖项来解决此问题。假设您需要从名为post.bundle.8cb615d12a121f6693aa.js的文件中导入一个方法：8cb615d12a121f6693aa.js",}}}而不是写：import{something}from'./static/dist/post.bundle.8cb615d12a121f6693aa.js'可以这样写：import{something}from'post.js'更新文件时，只需要更新importmap。由于对它们的导出的引用没有改变，它们将保留在浏览器中的缓存中，而更新的脚本将由于更新的哈希值而再次下载。在中使用同一模块的多个版本在importmap中很容易实现一个包对应多个版本。您需要做的就是在映射中使用不同的导入说明符，如下图所示：通过使用scope，也是可以使用相同的导入说明符来引用同一包的不同版本。这允许我们在给定范围内更改导入说明符的含义。有了这个映射，/static/js路径下的任何模块，在lodash/时导入语句中引用说明符，将使用https://unpkg.com/lodash-es@3.10.1/，而其他模块将使用https://unpkg.com/lodash-es@4.17.21/。将NPM包与导入映射一起使用如本文所示，任何使用ES模块的NPM包的生产版本都可以通过CDN（例如ESM、Unpkg和Skypack）在导入映射中获得。即使NPM上的包不是为ES模块系统和本机浏览器导入行为设计的，Skypack和ESM等服务也可以将它们转换为可在导入映射中使用的包。使用Skypack主页上的搜索栏来查找浏览器优化的NPM包，这些包可以随时使用，而无需修改构建步骤。检测导入地图支持只要支持HTMLScriptElement.supports()方法，就可以在浏览器中检测到导入地图的支持：if(HTMLScriptElement.supports&&HTMLScriptElement.supports('importmap')){//导入地图支持}支持旧浏览器导入映射使得在浏览器中使用裸模块说明符成为可能，而无需依赖当今JavaScript生态系统中普遍存在的复杂构建系统，但目前在Web浏览器中并未得到广泛支持。在撰写本文时，Chrome和Edge浏览器版本89及更高版本提供了完整支持，但Firefox、Safari和一些移动浏览器不支持该技术。为了在这些浏览器中保留导入映射的使用，必须实施合适的polyfill。可以使用的polyfill示例是ESModuleShimspolyfill，它为支持ES模块基线（约94%的浏览器）的任何浏览器添加了对导入映射和其他新模块功能的支持。我们需要做的就是在导入地图脚本之前在HTML文件中包含es-module-shim脚本在包含polyfill之后，您可能会在控制台中收到JavaScriptTypeError。可以安全地忽略此错误，因为它不会对用户造成任何后果。总之，importmaps提供了一种在浏览器中使用ES模块的合理方式，而不局限于从相对或绝对URL导入。这使我们能够轻松地移动代码而无需调整import语句，并使对各个模块的更新更加无缝，而不会影响依赖于这些模块的脚本的可缓存性。总的来说，importmaps使ES模块在服务器和浏览器中的使用方式保持一致。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。作者：romaopedro199译者：前端小智来源：dev原文：https://www.honeybadger.io/bl...交流有梦，有干货，微信搜索【大千世界】关注这个我还在做菜在清晨洗碗的智慧。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。
