值得庆祝
Import maps 特性现在可以在全部三个主要浏览器内使用
现在主流现代web 应用 引入和利用javascript 是通过 Es module 模块实现。 在开发javascript上,比起无模块化功能的旧版浏览器,现代浏览器支持模块化且提供了许多好用的功能
引入 es module 使用 <script type=“importmap”>
标签这种新方式实现。 这个标签允许你定义一个map映射外部模块名到它所对应的 URLs, 这使得它以更简便的方式引入外部模块到你的代码 中。
使用 <script type="importmap">
这种方式,你需要把它添加至 HTML document 的 节点。在这个标签内你可以定义一个JSON 对象,它映射了模块名和模块名对应的模块URLs, 举个栗子:
<script type="importmap">
{
"imports": {
"browser-fs-access": "https://unpkg.com/[email protected]/dist/index.modern.js"
}
}
</script>
例子上的代码定义了单个外部名为 “browser-fs-access” 模块,它映射到browser-fs-access 库 对应的URL ,由 unpkg CDN 提供, 有了这些映射,你现在就可以在你的代码中 使用 import 关键字去引入 browser-fs-access 库。注意,import 关键字只在 <script type=“module”>
标签内起起作用 。
<button>Select a text file</button>
<script type="module">
import {fileOpen} from 'browser-fs-access';
const button = document.querySelector('button');
button.addEventListener('click', async () => {
const file = await fileOpen({
mimeTypes: ['text/plain'],
});
console.log(await file.text());
});
</script>
在开发javascript 时,比起无模块化功能的老旧浏览器上,新浏览器上 <script type="importmap">
标签和 import 关键字提供了许多好处。它允许你将你代码中依赖的模块清晰分离特殊的外部模块,这使得你更容易理解和管理你的代码。总而言之,在web应用中 使用