浏览器上引入npm管理的包

好几次在浏览器测试结果都是差包，不得不在项目中打日志进行测试。再之后就是启动一个node服务来运行测试。偶然间在github上看到大神写的感觉很有用，所以发个文保存一下，不然后面又忘记了。

实现原理就是通过浏览器页面的script引入文件。因为npm管理的包说到底都是js文件，只要我们想办法把js文件加载到浏览器，那么这个问题就解决了。

// 存储原始传入的名称
let pkg_name_origin = null;
const npmInstall = (originName) => {
  const name = originName.trim();
  pkg_name_origin = name;
  // 三种引入方式
  // 如果是一个有效的URL，直接通过<script />标签插入
  if (/^https?:\/\//.test(name)) return injectScript(name);
  // 如果指定了版本，尝试使用unpkg加载
  if (name.indexOf('@') !== -1) return unpkg(name);
  // 否则，尝试使用cdnjs搜索
  return cdnjs(name);
};

// 在页面中插入<script />标签
const injectScript = (url) => {
  const script = document.createElement('script');
  script.src = url;
  script.onload = () => {
    console.log(pkg_name_origin, ' 安装成功');
  };
  script.onerror = () => {
    console.log(pkg_name_origin, ' 安装失败');
  };
  document.body.appendChild(script);
  // document.body.removeChild(script);
};

const unpkg = (name) => {
  injectScript(`https://unpkg.com/${name}`);
};

const cdnjs = async (name) => {
  const searchPromise = await fetch(
    `https://api.cdnjs.com/libraries?search=${name}`,
    // 不显示referrer的任何信息在请求头中  这个请求模式基本已经废了
    { referrerPolicy: 'no-referrer' }
  );
  const { results, total } = await searchPromise.json();
  if (total === 0) {
    console.error('Sorry, ', name, ' not found, please try another keyword.');
    return;
  }

  // 取结果中最相关的一条
  const { name: exactName, latest: url } = results[0];
  if (name !== exactName) {
    console.log(name, ' not found, import ', exactName, ' instead.');
  }
  // 通过<script />标签插入
  injectScript(url);
};