紹介#
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" />