How to call libraries such as JQuery and JQuery UI in Liferay 7 / DXP

I want to use JQuery + JQuery UI on Liferay 7 / DXP

From Liferay 7 / DXP, Liferay standard AUI was declared deprecated, and the code on the Liferay main body side is now starting to be written in Metal.js etc., but the library etc. are not yet enriched and the deprecated AUI is still used. I am. If you want to develop your own using Javascript library with custom portlet etc., even if you load the library with a common combination such as JQuery + JQuery UI, loading the library with Liferay's recommended AMD loader works well for global definition I can't handle it and an error occurs, so It's a bit outdated, but if you need to load the library using the script tag, I've created a sample of how to load it using `` `CustomJspBag```.

https://github.com/yasuflatland-lf/js-global-hook

For those who use DXP, after DE30, https://github.com/liferay/liferay-blade-samples/tree/master/gradle/apps/npm/jquery-npm-portlet Like, JQuery is loaded using npm and it is now available, so please use this method.

The point is

src/main/resources/META-INF/jsps/html/common/themes/top_js-ext.It will be in jspf.

 [As in this article](https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/using-external-libraries) exposes the library globally.


#### **`top_js-ext.jspf`**
```jspf

<link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet">	
	
<%-- This part enable to expose JS object to global --%>
<script>
    define._amd = define.amd;
    define.amd = false;
</script>

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

<%-- This part disable to expose JS object to global --%>
<script>
    define.amd = define._amd;
</script>