使用 import() 表达式在 DevTools 中快速导入第三方库

有时需要在网页上提取一些数据或是自动化一些操作，缺少像 Lodash 这样的工具操作起来就比较费时费力，之前我准备了这样一个代码片段以备不时之需：

function loadLib(lib) {
  const libUrl = {
    _: 'https://cdn.jsdelivr.net/npm/lodash',
    $: 'https://cdn.jsdelivr.net/npm/jquery',
    date: 'https://cdn.jsdelivr.net/npm/date-fns',
  };
  return new Promise(resolve => {
    const script = document.createElement('script');
    script.src = libUrl[lib] ?? `https://cdn.jsdelivr.net/npm/${lib}`;
    script.onload = resolve;
    document.body.append(script);
  });
}

await loadLib('_');

现在则不必那样做了，可在浏览器控制台中导入 ES 模块来加快开发或调试效率：

let { shuffle } = await import('//esm.run/lodash-es');
let { range } = await import('//esm.run/d3');
shuffle(range(20)); // 👈 将 20 个数打乱顺序

这样也不用担心引入的模块对 window 造成污染或与已经存在的依赖发生冲突。

注意

由于当前网站设置了 CSP，无法在当前页面执行上面的代码。

• 输入 let 比 const 更快
• 使用了相对协议的 URL（如果是 HTTP 站点自行换成 HTTPS 协议）
• 动态 import

支持 ESM 的 CDN