本文的目的在於學習如何在soy portlet中使用第三方js類庫，並且在ES6腳本中使用。
在Liferay DXP中，已經內置了大量的js類庫。JQuery、AlloyUI、metal還有Lexicon組件等等。
這些類庫都是一些知名的框架，但是真正項目開發中，僅僅用這些類庫是遠遠不夠用的。當今世界，技術變革很快，需求也變化的很快，Liferay的框架正是爲應對這種變化而設計的，讓開發者一直可以使用新鮮技術。
我們可以利用NodeJS來獲取管理第三方類庫，並且整合到Liferay中。
本文將帶你一瞥Liferay整合技術的強大功能。
所需知識:
Google Closure Soy template.
Liferay Soy Portlet.
ECMA script 2015(ES6)
Chart.js
在上一篇文章中，我們已經學會類如何使用LiferayIDE創建一個metal soy portlet。
基於我們所學的知識，我們將會進一步開發我們的portlet -- 創建一個圖表。在我的工作中所遇到的大多數需求都有一定程度的報表需求，這種需求相當普遍。我們自己手動發明表格很不現實（UI大神除外）。所以我們需要利用js類庫來創建表格，Chart.js就是一個不錯的選擇，節省時間節省成本。
接下來我們就來創建一個顯示chartjs的soy portlet吧。
第一步，創建soy portlet
第二步，添加ChartJS的依賴
爲了使用ChartJS，我們需要在package.json中添加NodeJS依賴，或者你也可以手動在項目中添加一個Chart.js的類庫。
"chart.js": "^2.4.0"
第三步，將類庫導入進你的運行環境中
由於Chart.js是第三方類庫，在原系統中並不存在類庫（這是基於chartjs還沒被任何組件使用過的前提下）。我們需要將類庫包含進最終的jar中。
接下來我們來配置我們的bnd.bnd來將js包含進所需要的目錄下。添加/修改下面的代碼到你項目的bnd.bnd文件中：
Include-Resource: package.json,\ META-INF/resources/js/Chart.js = node_modules/chart.js/dist/Chart.js
這句話的含義是，我希望在jar中的META-INF/resources/js目錄下存放一個Chart.js文件，這個文件的源在項目目錄中的node_modules/chart.js/dist/Chart.js位置。
也可以在bnd.bnd中添加一個項目上下文路徑：
Web-ContextPath: /chartjs-soy
第四步，Soy模板
Step 4, Work with soy template
接下來，我們會在soy模板中添加一個canvas作爲報表的容器，添加下面的代碼到ChartjsSoy.soy文件中：
{namespace ChartjsSoy}/** * Display Chart canvas */{template .render} <canvas id="chartjs-soy"> </canvas>{/template}
第五步，在組件中導入Chart.js
我相信本文的讀者中一定知道我們一般在html中怎麼寫ChartJS，大概是這樣：
<script src="Chart.js"></script><script> var myChart = new Chart({...})</script>
但是這並不是我們要使用的方法。我們會利用ES6來使用Chart類，正好藉機會學習下ES6啦 ：）
將下面的代碼添加到ChartjsSor.es.js頭中：
import Chart from 'chartjs-soy/js/Chart';
可以看到chartjs-soy是我們在bnd.bnd中定義的上下文路徑，/js/Chart是我們的資源文件夾。
第六步， 使用Chart.js創建報表
將下面的代碼添加到組件中：
/**
* Create Chart
*
* @protected
*/
createChart_() {
let chartcanvas = document.getElementById("chartjs-soy");
let data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
let options = {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
};
let myBarChart = new Chart(chartcanvas, {
type: 'bar',
data: data,
options: options
});
}
第七步，構造方法
接下來我們添加一個構造方法來調用我們創建的createChart方法
constructor(opt_config) {
super(opt_config);
this.createChart_();
}
第八步，編譯、部署、測試、調試和熟悉
如果上述步驟正確的話，你會看到一個報表，如下圖：
現在你終於見到如何在項目中輕鬆的使用第三方js類庫來改善用戶體驗了吧。別侷限於這個類庫，熟悉下這個過程，試試其他的類庫！
希望你喜歡
整個項目的代碼和編譯好的jar在這裏