大道至简，繁在人心：在浏览器控制台安装npm包是什么操作？
npm install xxx在 React、Vue、Angular 等现代前端项目中安装依赖，但是前端项目在本质上还是运行在浏览器端的 HTML、JavaScript 和 CSS，那么，我们有办法在浏览器控制台直接安装 npm 包并使用吗？通过 <script /> 引入 cdn 资源
<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, ' 安装失败。');
};
<script />标签移除。当然，你也完全可以通过创建<link />标签来引入css样式库，这里不过多赘述。根据包名安装 npm 包
<script /> 引入 cdn 资源，但是我们安装 npm 包一般都是通过npm install后面直接跟包名来完成的，显然单靠<script />的方式难以达到我们的饿预期，那么，有没有一种方式，可以将我们的包名直接转换成 cdn 资源地址呢？cdnjs就提供了这样的能力。
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 install jquery@3.5.1的语法安装特定版本的 npm 包，而 cdnjs 只能返回特定版本的详细信息（不含 cdn 资源链接）。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地址
不每次都写这些函数行不行
Console Importer，它可以让你的浏览器控制台成为更强大的实验场。使用示例：
可以干什么
loadsh、moment、jQuery、React 等来进行使用和验证，减少在项目中进行console.log验证后再删除的频次。你可以通过引入
jQuery方便的进行一些项目、页面中的DOM操作；你可以通过引入
axios进行一些简单的接口请求；你可以通过引入
moment.js来验证一些时间格式化方法的使用；你可以通过引入
loadsh并调用它的方法完成一些便捷的计算；...
可以学到什么
unpkg
unpkg.com/:package@:version/:file。或者更简洁一点：https://unpkg.com/➕包名，包名包含版本号时，你将获得对应版本的js文件，不包含版本号时，你将获得这个库的最新版js文件。cdnjs
https://api.cdnjs.com/libraries?search=xxx进行特定库的cdn地址的查找，这个API还会给你返回一些你所查询的库的替代品。大道至简，繁在人心
参考资料
评论