进口 瞬间 从 “瞬间” ;
进口 { 隔板 } 从 “lodash” ; < 脚本 类型 =" 导入映射 " >
{
“导入” : {
“瞬间” : “/node_modules/moment/src/momer.js” ,
“lodash” : “/node_modules/lodash-es/lodash.js”
}
}
</ 脚本 > 进口 瞬间 从 “/node_modules/moment/src/momer.js” ;
进口 { 隔板 } 从 “/node_modules/lodash-es/lodash.js” ; 常数 $ = 要求 ( “jquery” ) ;
常数 { 摘下 } = 要求 ( “lodash” ) ; 进口 $ 从 “jquery” ;
进口 { 摘下 } 从 “lodash” ; { “导入” : { “瞬间” : " /节点模块/moment/src/moment.js " , “lodash” : " /node_modules/lodash-es/lodash.js节点模块 " } } 进口 瞬间 从 “瞬间” ;
进口 ( “lodash” ) . 然后 ( _ => ... ) ; { “导入” : { “瞬间” : " /节点模块/moment/src/moment.js " , “瞬间/” : " /节点模块/力矩/src/ " , “lodash” : " /节点模块/lodash-es/lodash.js " , “lodash/” : " /节点模块/lodash-es/ " } } 进口 瞬间 从 “瞬间” ;
进口 _ 从 “lodash” ; 进口 本地数据 从 “moment/locale/zh-cn.js” ;
进口 英尺/平方英尺 从 “lodash/fp.js” ; { “导入” : { “lodash” : " /节点模块/lodash-es/lodash.js " , “lodash/” : " /节点模块/lodash es/ " , “lodash/fp” : " /节点模块/lodash-es/fp.js " , } } { “导入” : { " https://www.unpkg.com/vue/dist/vue.runtime.esm.js " : " /节点模块/vue/dist/vue.runtime.esm.js " } } { “导入” : { “/app/helpers.mjs” : " /app/helpers/index.mjs " } } { “导入” : { " https://www.unpkg.com/vue/ " : " /节点模块/vue/ " } } -
考虑一个简单的模块图 应用程序.mjs 取决于 dep.mjs程序 这取决于 子部门.mjs 通常，如果您升级或更改 子部门.mjs , app.mjs应用程序 和 dep.mjs公司 可以保持缓存，只需要传输新的 子部门.mjs 通过网络。 -
现在考虑相同的模块图，使用哈希文件名进行生产。 在这里，我们生成了构建过程 应用-8e0d62a03.mjs , 部门-16f9d819a.mjs 、和 子部门-7be2aa47f.mjs 从最初的三个文件中。 如果我们升级或更改 子部门.mjs ，我们的构建过程将为生产版本重新生成一个新的文件名，例如 子部门-5f47101dc.mjs 。但这意味着我们需要改变 进口 的生产版本中的语句 dep.mjs公司 。这会更改其内容，这意味着 dep.mjs公司 它本身需要一个新的文件名。 但这意味着我们需要更新 进口 的生产版本中的语句 app.mjs应用程序 ...
{ “导入” : { “/js/app.mjs” : " /js/应用程序-8e0d62a03.mjs " , “/js/dep.mjs” : " /js/dep-16f9d819a.mjs " , “/js/sub-dep.mjs” : " /js/sub-dep-7be2aa47f.mjs " } } { “导入” : { “/js/app.mjs” : " /js/app-8e0d62a03.mjs " , “/js/dep.mjs” : " /js/dep-16f9d819a.mjs " , “/js/sub-dep.mjs” : " /js/subledep-5f47101dc.mjs " } } 进口 “./app.mjs” ; < 脚本 类型 =" 模块 " 型钢混凝土 =" ./app.mjs文件 " > </ 脚本 > < 脚本 类型 =" 模块 " > 进口 “./app.mjs” ; </ 脚本 > { “导入” : { “querystringify” : " /节点模块/querystringify/index.js " }, “范围” : { “/node_modules/socksjs-client/” : { “querystringify” : " /node_modules/socksjs-client/querystringify/index.js " } } } { “导入” : { “a” : " /a-1毫米 " , “b” : " /b-1毫米 " , “c” : " /c-1.毫焦耳 " }, “范围” : { “/scope2/” : { “a” : " /a-2.毫焦耳 " }, “/scope2/scope3/” : { “b” : " /b-3.毫焦耳 " } } } < 脚本 类型 =" 导入映射 " >
{
“导入” : { ... } ,
“范围” : { ... }
}
</ 脚本 > < 脚本 类型 =" 导入映射 " 型钢混凝土 =" 导入映射导入映射 " > </ 脚本 > < 脚本 >
常数 感应电动机 = 文件 . 创建元素 ( '脚本' ) ;
感应电动机 . 类型 = '导入映射' ;
感应电动机 . text内容 = JSON格式 . 纤细的 ( {
进口 : {
'我的图书馆' : 数学 . 随机的，随机的 ( ) > 0.5 ? “/我很棒的图书馆.mjs” : “/my-rad-library.mjs”
}
} ) ;
文件 . 当前脚本 . 之后 ( 感应电动机 ) ;
</ 脚本 >
< 脚本 类型 =" 模块 " >
进口 “我的名字” ; //将获取随机选择的URL
</ 脚本 > < 脚本 >
常数 导入地图 = {
进口 : {
瞬间 : '/mome.mjs' ,
洛达什 : 一些功能检测 ( ) ? '/lodash.mjs' : “/lodash-legacy-browsers.mjs”
}
} ;
常数 感应电动机 = 文件 . 创建元素 ( '脚本' ) ;
感应电动机 . 类型 = '导入映射' ;
感应电动机 . text内容 = JSON格式 . 纤细的 ( 导入地图 ) ;
文件 . 当前脚本 . 之后 ( 感应电动机 ) ;
</ 脚本 >
< 脚本 类型 =" 模块 " >
进口 _ 从 “lodash” ; //将获取此浏览器的正确URL
</ 脚本 > <! DOCTYPE html >
<!-- 此文件是 https://example.com/ -->
< 脚本 型钢混凝土 =" 阻塞-1.js " > </ 脚本 >
< 脚本 类型 =" 模块 " >
进口 “./foo.mjs” ;
</ 脚本 > <! DOCTYPE html >
<!-- 此文件是 https://example.com/ -->
< 脚本 型钢混凝土 =" 阻塞-2.js " > </ 脚本 >
< 脚本 类型 =" 导入映射 " >
{
“导入” : {
“foo” : “./foo.mjs” ,
" https://other.example/bar.mjs " : “./bar.mjs”
}
}
</ 脚本 >
< 脚本 类型 =" 模块 " >
进口 “foo” ;
进口 " https://other.example/bar.mjs " ;
</ 脚本 > 常数 埃尔 = 文件 . 创建元素 ( “基础” ) ;
埃尔 . href公司 = “/子目录/” ;
文件 . 当前脚本 . 之后 ( 埃尔 ) ; 文件 . 写 ( `<script type=“importmap”>
{
“进口”：{
“foo”：“./other foo.mjs”，
" https://other.example/bar.mjs（其他示例） ": "./ other-bar.mjs“
}
}
</script>` ) ; < 基础 href公司 =" https://www.unpkg.com/vue/dist/ " >
< 脚本 类型 =" 导入映射 " >
{
“导入” : {
“视觉” : “./vue.runtime.esm.js” ,
}
}
</ 脚本 >
< 脚本 >
进口 ( “视觉” ) ; //决心 https://www.unpkg.com/vue/dist/vue.runtime.esm.js
</ 脚本 > 如果 ( HTML脚本元素 . 支架 && HTML脚本元素 . 支架 ( '导入映射' ) ) {
慰问 . 日志 ( '您的浏览器支持导入地图。' ) ;
} 节点_模块_平台化/ 洛达什/ 索引.js 核心.js fp.js格式 力矩/ 索引.js html到dom/ 索引.js 基本URL（在我们的应用程序中， /节点_模块_平台化/ ) 使用的主模块文件名（在我们的应用程序中， 索引.js )
-
正如当前设想的那样，应用程序中的大多数模块在导入映射中都没有条目。 主要用例用于需要由裸说明符引用的模块，或者需要执行一些复杂操作（如聚合填充或虚拟化）的模块。 如果我们设想每个模块都在地图中，那么我们就不会包括诸如packages-via-trailing-slashes之类的便利功能。 -
到目前为止，所有建议的元数据都适用于任何类型的资源，而不仅仅是JavaScript模块。 解决方案可能在更一般的级别上工作。
常数 网址 = 进口 . 元 . 决定 ( “somepackage/resource.json” ) ; jspm公司 是一个命令行导入映射包管理工具。 jspm-vscode代码 是一个 VS代码 用于生成、注入HTML和更新导入映射的扩展。 https://generator.jspm.io网址 是用于生成导入映射的联机生成器。 @jspm/生成器 是用于生成导入映射的底层核心库。 @导入映射/解析 解析相对于导入映射的说明符。 @jsenv/importmap-node-module 从您的 package.json包 和 节点_模块/ 目录。 @jsenv/importmap-eslint-resolver 在中启用导入地图分辨率 ESLint公司 . @节点加载器/导入映射 是一个 Node.js加载程序 用于在Node.js中使用导入映射。 @web/dev-server-import-maps 允许在开发和测试期间使用导入映射 @web/dev服务器 和 @网络/测试浏览器 . 德诺 是带有的JavaScript/TypeScript运行时 对导入映射的内置支持 . es-模块垫片 为具有基本ES模块支持的浏览器提供了导入映射polyfill。 导入映射部署器 用于更新CI中的导入映射文件。 导入映射覆盖 允许使用导入映射通过指向本地版本来改进开发流程。 重要地 从 package.json包 . 系统JS 提供了一个类似于polyfill的工作流，用于在较旧的浏览器中使用系统模块格式和 <script type=“systemjs-importmap”> . webpack-import-map-plugin 为的输出生成导入映射 网络包 ，特别适用于 散列用例 . 导入映射 是执行规范的防锈板条箱。 Deno使用。