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

Question

这样做：

const _ = await import('https://unpkg.com/lodash')

给了我一个奇怪的物体，其单个

Symbol(Symbol.toStringTag)

道具的价值为

"Module"

。

注1：我知道这个技巧

import _ from 'lodash'
window._ = _

在您的代码中，仅当直接从浏览器的开发工具控制台导入时才请给出答案。

注2：我也知道这个问题已经被问过很多次。我通读了所有的答案，它们要么现在不起作用，要么因为注1而不适用。所以我决定再问一次。

Answer 1

这是我发现的 lodash 特定的东西，因为它使用 IIFE

await import("https://unpkg.com/lodash");
console.log(_, window._);

Answer 2

这里有一个小帮助函数，我发现可以很方便地在开发控制台中从 NPM 加载 ESM 包：

/**
 * Load an ESM package from npm in your JavaScript environment.
 *
 * Loads packages from https://www.npmjs.com/ via the CDN https://www.jsdelivr.com/
 *
 * Usage:
 * 
 *     const lodash = await npm('lodash-es')
 *     const lodash = await npm('lodash-es@4')
 *     const lodash = await npm('[email protected]')
 *
 *     lodash.uniq([1, 3, 2, 1, 2, 2]) // [1, 3, 2]
 */
async function npm(name) {
  return await import(`https://cdn.jsdelivr.net/npm/${name}/+esm`)
}

参见要点：https://gist.github.com/josdejong/3d176fa90efa36ed51ab6a4e8810074e

Answer 3

也许你可以尝试这个 chrome 扩展

https://chromewebstore.google.com/detail/import-pkg-in-devtools/gnhpejmeamlmmchelpnnlbelipcnieaa

在 devtools 中导入 pkg