二月 1, 2019 | 後端和Drupal

【D8 教學】如何通過composer.json加入第三方插件到Library資料夾

在D8的環境中，我們將會大量的使用Composer來管理所有模組與環境的相依套件。但常常我們會遇到我們需要直接來下載第三方套件才能使用模組的情況，這個時候就會需要通過composer來加入這些套件來製作，這篇文章就是分享如何通過直接在composer.json裡加入第三方套件，下載並且安裝。

前言

加入第三方套件方法

目前統整加入第三方套件的方法主要有以下幾種：

手動下載、drush下載
在packagist找到套件，並且通過composer指令安裝
直接在composer.json加入repo，並且通過指令安裝

三種方法目前比較建議的是第二種與第三種，本篇文章將會以第三種為主，若第二種您還不是很瞭解，可以參考這篇文章D8筆記：找不到Library嗎？自己建立Composer Package，再引用到到專案內吧

以D8的Animations模組為例

這篇文章範例將以製作動畫特效的Animations模組為範例，由於這個模組需要額外安裝三種第三方插件，所以是個非常好的範例。

模組網址：https://www.drupal.org/project/animations

第三方插件：

Typed JS library ：https://github.com/mattboldt/typed.js
Animate CSS library ： https://github.com/daneden/animate.css
WOW JS library： https://github.com/matthieua/WOW

若在一開始安裝模組結束後，你一定可以在後台發現，需要額外安裝上述三個套件

再來其實只需要通過更改composer.json，將這三個套件的來源加入即可。

composer.json

要加入三個套件，其實只需要在composer.json裡面的repositories區域裡，將這三個來源加入即可

"repositories": [
{
	"type": "composer",
	"url": "https://packages.drupal.org/8"
},
{
	"type": "package",
	"package": {
		"name": "mattboldt/typedjs",
		"version": "2.0.9",
		"type": "drupal-library",
		"dist": {
			"url": "https://github.com/mattboldt/typed.js/archive/v2.0.9.zip",
			"type": "zip"
		}
	}
},
{
	"type": "package",
	"package": {
		"name": "daneden/animatecss",
		"version": "3.7.0",
		"type": "drupal-library",
		"dist": {
			"url": "https://github.com/daneden/animate.css/archive/3.7.0.zip",
			"type": "zip"
		}
	}
},
{
	"type": "package",
	"package": {
		"name": "matthieua/wowjs",
		"version": "1.1.0",
		"type": "drupal-library",
		"dist": {
			"url": "https://github.com/matthieua/WOW/archive/1.1.0.zip",
			"type": "zip"
		}
	}
}

執行Composer指令

在加入了三個插件到repositories之後，通過下列指令，就可以將對應的插件下載到libraries目錄底下。

$ composer require  mattboldt/typedjs daneden/animatecss matthieua/wowjs

成功安裝畫面

libraries資料夾

備註：若有注意到 type：drupal-library，就是其中的關鍵，這個即是告訴composer，下載下來的類型為何，並且通過composer.json下面的installer-paths，有明確定義出library要放置的目錄位置，因此就可以通過composer.json直接進行對第三方插件的管控囉。

結論

在D8的環境下，幾乎只會對於自行開發的程式碼進行版本控制，因此，從網路上下載下來的不管是核心程式、模組、佈景、library都會被gitignore掉，這個絕對是跟D7有很大很大的差別。因此，在D8的環境下，Composer的使用將會是絕對重要的事情，而這個上述的分享，將會對於第三方插件的操作，有很大的幫助，Enjoy～