关于前端:大道至简繁在人心在浏览器控制台安装npm包是什么操作

34次阅读

共计 4837 个字符,预计需要花费 13 分钟才能阅读完成。

大音希声,大象无形,大智若愚,大巧若拙,越是“简单”的货色,其原理越趋势“简略”,大道至简,繁在人心

  咱们都晓得,npm 是 JavaScript 世界的包管理工具, 并且是 Node.js 平台的默认包管理工具。通过 npm 能够装置、共享、散发代码, 治理我的项目依赖关系。尽管作为命令行工具的 npm 近年来逐步式微,然而作为宽泛应用的存储库的 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 /> 标签移除。当然,你也齐全 能够通过创立 <link /> 标签来引入 css 款式库,这里不过多赘述。

依据包名装置 npm 包

  下面实现了通过 <script /> 引入 cdn 资源,然而咱们装置 npm 包个别都是通过npm install 前面间接跟包名来实现的,显然单靠 <script /> 的形式难以达到咱们的饿预期,那么,有没有一种形式,能够将咱们的 包名间接转换成 cdn 资源地址 呢?

  答案当然是:有。否则我写个屁啊 🤔,cdnjs就提供了这样的能力。

  cdnjs 提供了一个简略的 API,容许任何人疾速查问 CDN 上的资源。具体应用读者可参考官网链接,这里给出一个依据包名查问 CDN 资源链接的示例,能够间接在浏览器地址栏关上这个链接查看:https://api.cdnjs.com/libraries?search=jquery,这是一个 get 申请,你将看到相似上面的页面,数组的第一项为 名称 / 性能最相近的资源的最新 CDN 资源地址

  是以,依据包名搜寻 cdn 资源 URL 便有如下的实现:

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);
};

装置特定版本的 npm 包

  咱们在 npm 中还能够通过相似 npm install jquery@3.5.1 的语法装置特定版本的 npm 包,而 cdnjs 只能返回特定版本的详细信息(不含 cdn 资源链接)。

  UNPKG 在此时能够帮咱们一个大忙。unpkg 是一个疾速的寰球内容散发网络,实用于 npm 上的所有内容。应用它能够应用以下 URL 疾速轻松地从任何包 加载任何文件unpkg.com/:package@:version/:file

  例如,拜访 https://unpkg.com/jquery@3.5.1 会主动重定向到 https://unpkg.com/jquery@3.5.1/dist/jquery.js,并返回v3.5.1 版本的 jQuery 文件内容(如果不带版本号,会返回最新的资源):

  也就是说,咱们能够将 https://unpkg.com/ 包名 间接丢给 <script /> 标签来加载资源:

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

残缺代码

  将下面的代码简略整顿,并通过一个对立的入口办法 npmInstall 进行调用:

// 存储原始传入的名称
let pkg_name_origin = null;
const npmInstall = (originName) => {
  // Trim string
  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);
};

  咱们能够应用相似 npmInstall('moment') 的形式在控制台进行调用:

  上面这些调用形式天然也是反对的:

npmInstall('jquery'); // 间接引入
npmInstall('jquery@2'); // 指定版本
npmInstall('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'); // cdn 地址

不每次都写这些函数行不行

  看了下面的操作,的确很简略,然而兴许你会说:每次要应用时,我都得在控制台定义和调用函数,有些麻烦,不每次都写这些函数行不行 ?那天然是行的啦,你齐全能够本人写一个 浏览器插件,将这些 JS 代码注入页面,详情可参考 7 分钟学会写一个浏览器插件——冲破某 SDN 未登录禁止复制的限度{:target=’_blank’}。

  如果你切实不想写,其实有人曾经为你写好了,那便是 Console Importer,它能够 让你的浏览器控制台成为更弱小的实验场

  • 应用示例:

  • 效果图:

链接:Console Importer | Chrome 插件地址

能够干什么

  那么,本文介绍的办法和工具到底有什么用呢?

  平时开发中,咱们常常会 想要在我的项目里尝试一些操作或者验证一些库的办法、打印后果 ,通过本文的学习,当前你齐全能够间接在控制台引入loadsh、moment、jQuery、React 等来进行应用和验证,缩小在我的项目中进行console.log 验证后再删除的频次。

  • 你能够通过引入 jQuery 不便的进行一些我的项目、页面中的 DOM 操作;
  • 你能够通过引入 axios 进行一些简略的接口申请;
  • 你能够通过引入 moment.js 来验证一些工夫格式化办法的应用;
  • 你能够通过引入 loadsh 并调用它的办法实现一些便捷的计算;

能够学到什么

unpkg

  unpkg 是一个内容源自 npm 的前端罕用寰球疾速 CDN,它能以疾速、简洁、优雅的形式提供任意包、任意文件的拜访,在风行的类库、框架文档中经常能看到它的身影。应用形式个别是 unpkg.com/:package@:version/:file。或者更简洁一点:https://unpkg.com/ 包名,包名蕴含版本号时,你将取得对应版本的 js 文件,不蕴含版本号时,你将取得这个库的最新版 js 文件。

cdnjs

  cdnjs{:target=’_blank’} 是一种收费的开源 CDN 服务,受到超过 12.5% 的网站的信赖,每月解决超过 2000 亿次申请,由 Cloudflare 提供反对。它相似 Google CDN 和微软 CDN 服务,然而速度比这二者更放慢。CDNJS 上提供了泛滥 JavaScript 库,你能够间接在网页上援用这些 JS 文件,实现用户浏览网站的最佳速度体验。

  你还能够通过它的查问 APIhttps://api.cdnjs.com/libraries?search=xxx进行 特定库的 cdn 地址的查找 ,这个 API 还会给你 返回一些你所查问的库的替代品

大道至简,繁在人心

  越是“简单”的货色,其原理兴许越是趋势“简略”,大道至简,繁在人心,祝每一个致力攀登者,终能恍然大悟,释然于心。

参考资料

  • Console Importer

  本文首发于集体博客),欢送斧正和 star。

正文完
 0