簡介#
在 Web 專案中已經有 package.json，所以我們可以透過 yarn 或其他工具來安裝客戶端庫，這是推薦的方式，當然也可以直接下載任意庫，然後放在你喜歡的目錄中使用，但本文主要介紹如何使用推薦的方式來集成前端庫。
假如我們想使用 wangEditor 库，那麼集成步驟應該是下面這樣。
步驟#
在 Web 中執行以下命令安裝依賴：
yarn add @wangeditor/editor
知道的人都知道，這樣安裝後，依賴庫會被下載到 node_modules 目錄中，可是我們專案一般是從 wwwroot 目錄中引用第三方庫，所以，下一步，我們需要進行複製，明白的人自然會明白我的意思。
ABP CLI's abp install-libs command copies resources from node_modules to wwwroot/libs folder.
也就是說，我們只需要按照 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
When you run this command, all packages will copy their own resources into the wwwroot/libs folder. Running abp install-libs is only necessary if you make a change in your dependencies in the package.json file.
最後，在專案中引用：
<abp-style src="/libs/wang-editor/css/style.css" />
<abp-script src="/libs/wang-editor/index.js" />