在Chrome控制台安装npm包

大音希声，大象无形，大智若愚，大巧若拙，越是“复杂”的东西，其原理越趋向“简单”，大道至简，繁在人心。

通常，我们通过npm install xxx在 React、Vue、Angular 等现代前端项目中安装依赖，但是前端项目在本质上还是运行在浏览器端的 HTML、JavaScript 和 CSS，那么，我们有办法在浏览器控制台直接安装 npm 包并使用吗？

如果你对这个问题感兴趣，不妨跟着我通过本文一探究竟，也许最终你会发现：越是“复杂”的东西，其原理越趋向“简单”。

通过 <script /> 引入 cdn 资源

在浏览器控制台安装 npm 包，看起来是个天马行空的想法，让人觉得不太切实际。如果我换一个方式进行提问：如何在浏览器/HTML 中引入 JavaScript 呢？也许你马上就有了答案：<script />标签。没错，我们的第一步就是通过 <script />标签在 HTML 页面上引入 cdn 资源。

那么，又该如果在控制台在页面上插入<script />标签来引入 CDN 资源呢？这个问题可难不倒你：

// 在页面中插入<script />标签
const injectScript = (url) => {
  const script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);
};

我们还得在资源引入后以及出现错误时，给用户一些提示：

script.onload = () => {
  console.log(pkg_name_origin, ' 安装成功。');
};
script.onerror = () => {
  console.log(pkg_name_origin, ' 安装失败。');
};

这么一来，我们就可以直接在控制台引入 cdn 资源了，你可以再额外补充一些善后工作的处理逻辑，比如把<script />标签移除。当然