Introduction#
In a Web project, there is already a package.json, so we can install client libraries using yarn or other tools. This is the recommended way, but you can also directly download any library and use it in the directory you prefer. However, this article mainly introduces how to integrate frontend libraries using the recommended method.
If we want to use the wangEditor library, the integration steps should be as follows.
Steps#
Execute the following command in Web to install the dependencies:
yarn add @wangeditor/editor
As you may know, after installing in this way, the dependency library will be downloaded to the node_modules directory. However, our project generally references third-party libraries from the wwwroot directory. Therefore, in the next step, we need to copy the files. Those who understand will naturally understand what I mean.
ABP CLI's abp install-libs command copies resources from node_modules to wwwroot/libs folder.
In other words, we only need to follow ABP's rules to use the abp install-libs command to move resources from node_modules to wwwroot/libs.
The rule is the Resource Mapping Definition File, which is Web\abp.resourcemapping.js, and its format is as follows:
module.exports = {
aliases: {
"@node_modules": "./node_modules",
"@libs": "./wwwroot/libs"
},
clean: [
"@libs",
"!@libs/**/foo.txt"
],
mappings: {
}
}
Copy the above content into it, and then add the following content:
mappings: {
"@node_modules/@wangeditor/editor/dist/css/style.css": "@libs/wang-editor/css/",
"@node_modules/@wangeditor/editor/dist/index.js": "@libs/wang-editor/",
}
Regarding which files to copy, this needs to be referred to the official website and your own needs.
Finally, execute the following command to automatically copy them:
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.
Finally, reference them in the project:
<abp-style src="/libs/wang-editor/css/style.css" />
<abp-script src="/libs/wang-editor/index.js" />