音希聲，大象無形，大智若愚，大巧若拙，越是“復雜”的東西，其原理越趨向“簡單”，大道至簡，繁在人心。

原文來自： https://segmentfault.com/a/1190000040875211?_ea=195828493

??我們都知道，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未登錄禁止復制的限制。

??如果你實在不想寫，其實有人已經為你寫好了，那便是Console Importer

vue依賴Node JS,需要安裝Node JS。

一、安裝Node js

從https://nodejs.org/zh-cn/，下載Node js.

推薦使用管理員權限安裝Node js，否則有可能會出現權限問題。在開始中找到或搜索命令提示符，右鍵以管理員身份運行：

為方便操作，把安裝文件放在了D盤目錄下，輸入如下命令，一路安裝即可：

二、新建Vue項目

打開VS2019，篩選vue項目，可以選擇javascript或者typeScript

三、確認VS2019已安裝node js

在VS中打開工具->獲取工具和功能

四、補全缺失的組件

在我的項目，右鍵，點擊：在終端中打開，在powerShell中輸入：npm install -g

或者：

如圖中點擊安裝npm包

五、運行項目：

在powerShell中輸入：npm run serve

瀏覽器打開http://localhost:8080/，可預覽網頁

修改.vue文件，頁面會自動刷新更新。

總結一下目前所用命令如下：

在項目右鍵，在終端中打開powerShell

補全缺失的組件

npm install -g

運行開發環境調試指令，修改頁面后自動刷新網頁

npm run serve