簡介#
在 Web 專案中已經有 package.json，所以我們可以透過 yarn 或其他工具來安裝客戶端庫，這是推薦的方式，當然也可以直接下載任意庫，然後放在你喜歡的目錄中使用，但本文主要介紹如何使用推薦的方式來整合前端庫。
假如我們想使用 wangEditor 库，那麼整合步驟應該是下面這樣。
步驟#
在 Web 中執行以下命令安裝相依項目：
yarn add @wangeditor/editor
知道的人都知道，這樣安裝後，相依庫會被下載到 node_modules 目錄中，可是我們專案一般是從 wwwroot 目錄中引用第三方庫，所以，下一步，我們需要進行複製，明白的人自然會明白我的意思。
ABP CLI 的 abp install-libs 命令會將資源從 node_modules 複製到 wwwroot/libs 資料夾中。
也就是說，我們只需要按照 ABP 的規定，就可以使用 abp install-libs 命令將資源從 node_modules 移動到 wwwroot/libs。
規則就是 Resource Mapping Definition File 資源映射定義文件，它就是 Web\abp.resourcemapping.js，格式如下：
module.exports = {
aliases: {
"@node_modules": "./node_modules",
"@libs": "./wwwroot/libs"
},
clean: [
"@libs",
"!@libs/**/foo.txt"
],
mappings: {
}
}
將上面的內容複製進去，然後再將下面的內容放進去：
mappings: {
"@node_modules/@wangeditor/editor/dist/css/style.css": "@libs/wang-editor/css/",
"@node_modules/@wangeditor/editor/dist/index.js": "@libs/wang-editor/",
}
關於我該複製哪些檔案過去，這個需要參考官網介紹以及自己的需求了。
最後執行下面這個命令，就可以自動複製過去了：
abp install-libs
當你執行這個命令時，所有套件將會將它們自己的資源複製到 wwwroot/libs 資料夾中。只有在 package.json 檔案中的相依項目有更動時，才需要執行 abp install-libs。
最後，在專案中引用：
<abp-style src="/libs/wang-editor/css/style.css" />
<abp-script src="/libs/wang-editor/index.js" />