紹介#
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 フォルダにコピーします。abp install-libs を実行する必要があるのは、package.json ファイルの依存関係に変更があった場合だけです。
最後に、プロジェクトで以下を参照します：
<abp-style src="/libs/wang-editor/css/style.css" />
<abp-script src="/libs/wang-editor/index.js" />