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

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

咱们都晓得，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。

通过 <script /> 引入 cdn 资源