在ES11的新功能中，import.meta是一个非常实用的对象，它可以用来访问导入的模块元数据。在中大型项目中，使用import.meta可以轻松简便地个性化管理导入的模块，从而提高代码的效率和可维护性。
import.meta 的基本使用
在使用import.meta之前，我们需要先了解JavaScript的模块导入机制，例如ES6中我们可以使用以下方式导入一个名为"module1"的模块：
import module1 from './module1.js';
在这个引入语句中，我们可以通过import.meta对象来获取到当前模块的元数据信息。
console.log(import.meta.url); // "file:///Users/me/project/module.js"
这里，我们使用了import.meta.url属性来获取当前模块的URL地址，以此来获取模块的路径信息。
使用 import.meta 获取其他元数据信息
除了获取模块的URL地址，我们还可以使用其他的import.meta属性来获取模块的其他元数据信息，如下：
- url：获取当前模块的URL地址信息。
- import：获取模块引入时的元数据信息。
- scriptElement：获取当前模块所在的<script>元素对象。</li> <li>scriptType：获取当前模块所在的<script>元素的type属性。</li> <li>moduleId：获取当前模块的ID。</li> </ul> <p>实现代码：</p> <pre class="prettyprint login javascript">// module.js console.log(import.meta.url); // "file:///Users/me/project/module.js" console.log(import.meta.import); // {} console.log(import.meta.scriptElement); // <script src="module.js"></script> console.log(import.meta.scriptType); // "module" console.log(import.meta.moduleId); // "module.js"</pre><h2>基于 import.meta 实现条件加载</h2> <p>在一些情况下，我们根据特定条件，来决定是否加载一个模块。这时候，我们通常采用二次导入（Dynamic Imports）来实现，如下：</p> <pre class="prettyprint login javascript">if (shouldLoadModule) { import('./module1.js').then(m => { m.doSomething(); }); }</pre><p>这种方式存在一定的局限性，因为它只能在运行时动态地加载模块，而不能在编译期动态地加载。</p> <p>利用import.meta.url属性，我们可以通过获取当前模块的URL地址来实现条件加载，如下：</p> <pre class="prettyprint login javascript">if (import.meta.url === 'https://example.com/main.js') { import('./module1.js').then(m => { m.doSomething(); }); }</pre><p>在上面的代码中，我们使用了import.meta.url属性来判断当前模块是否为<a href="https://example.com/main.js%E3%80%82%E5%A6%82%E6%9E%9C%E6%98%AF%EF%BC%8C%E5%88%99%E5%8A%A8%E6%80%81%E5%9C%B0%E5%8A%A0%E8%BD%BDmodule1%E6%A8%A1%E5%9D%97%E3%80%82">https://example.com/main.js。如果是，则动态地加载module1模块。</a></p> <p>总结</p> <p>import.meta是一个非常实用的对象，它为我们访问导入的模块元数据提供了极大的方便。在实际开发中，我们可以根据具体的情况，选择使用import.meta来提高代码的效率和可维护性。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/65445cd87d4982a6ebe3d6a6">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/65445cd87d4982a6ebe3d6a6">https://www.javascriptcn.com/post/65445cd87d4982a6ebe3d6a6</a></p> </blockquote>