如何在浏览器开发者工具控制台中正确加载NPM包？

为啥之前的代码不行？ #

用await import('https://unpkg.com/lodash')拿到的是ES模块的命名空间容器，真正的Lodash函数其实在这个对象的default属性里，所以直接赋值给_才会拿到那个奇怪的Module对象。

两种可用方案 #

方案1：提取ES模块的默认导出 #

直接在控制台执行这段代码：

const { default: _ } = await import('https://unpkg.com/lodash');
window._ = _;

执行完就能直接用_.debounce()、_.cloneDeep()这些Lodash方法，把_挂到window上是为了后续不用重复导入，直接调用全局变量即可。

方案2：加载UMD格式的包 #

如果觉得ES模块的写法麻烦，也可以直接加载UMD版本的Lodash，它会自动把_挂载到全局：

const script = document.createElement('script');
script.src = 'https://unpkg.com/lodash@4.17.21/lodash.min.js';
document.head.appendChild(script);
// 想确认加载完成的话可以加个回调
script.onload = () => {
  console.log('Lodash已加载，试试输入_.VERSION验证');
};

验证是否成功 #

在控制台输入_.VERSION，如果能返回具体的版本号（比如4.17.21），就说明加载没问题了。

内容的提问来源于stack exchange，提问作者repka