1. Compartilhando
bibliotecas JS entre
Angular e React
no Liferay
Roselaine Marques
Sep 03, 2020
Consultant at Liferay Global Services
RoselaineMarq10

2. > Compreendendo a diferença entre projetos
JS e Hybrid em Liferay
> Vantagens de utilizar “Biblioteca
Compartilhada”
> Como criar um "Javascript de Biblioteca
Compartilhada"
> Como consumir um “Javascript de Biblioteca
Compartilhada” com Angular
> Como consumir um Javascript de Biblioteca
Compartilhada com React
Sumário

3. Você sabe conhece realmente os módulos que podem utilizar React,
Angular, ou Vue ?
yo liferay-js
1
2 blade create npm-angular-portlet
...Ambos oferecem a possibilidade,
mas com uma grande diferenca?

4. L
I
F
E
R
A
Y
Era digital , canais inteligentes
DO SEU PORTAL
USEM < NPM INSTALL > COM MODERAÇÃO!!!

5. Possíveis problemas ao não utilizar uma biblioteca compartilhada?
Perda de desempenho: Arquivos JS serão baixados para cada módulo (aqueles da
dependência) o que implica em um tempo de carregamento maior.
Possíveis conflitos entre as versões: Se você usar versões diferentes do angular,
pode haver conflitos.
Maior tempo de construção: por ter que empacotar o módulo com todas as suas
dependências, o tempo de construção é consideravelmente alto.
1
2
3
Vantagens de utilizar “Biblioteca Compartilhada”,
evitar os problemas acima XD…
e alguns mais nao mencionados...

6. L
I
F
E
R
A
Y
Impacto dos Desafios
Como criar um "Javascript de Biblioteca Compartilhada"

7. Obrigatório: Node, Yeoman e NPM instalados
1. Primeiramente, é necessário instalar o generator-liferay-js em nível global, executando o
seguinte comando:
npm install -g generator-liferay-js
2. Após a instalação, dentro do seu "liferay-workspace / modules" ou alguma outra pasta do
projeto que você está usando, execute o gerador com:
yo liferay-js
3. Escolha o tipo "Pacote compartilhado" e preencha o restante das informações
necessárias.
4. Abra src / index.js e adicione após init ():
console.log ('common-js-bundle está funcionando como provedor
...');

8. 5. Agora um projeto angular, executando o gerador dentro de seu "liferay-workspace /
modules" ou alguma outra pasta de projeto que você está usando.
yo liferay-js
6. Escolha o tipo "Widget Angular" e preencha o restante das informações necessárias.
7. Abra o package.json e copie tudo em “dependências”.
Como consumir um “Javascript de Biblioteca Compartilhada” com Angular

9. 8. Copie como “dependências” no package.json do módulo “Shared Bundle” criado anteriormente.
9. Dentro do módulo do tipo “Shared Bundle”, execute o seguinte comando para instalar as
bibliotecas / dependências adicionadas.
npm install
10. De volta ao módulo "Angular Widget", abra o arquivo .npmbundlerrc (abaixo continuaremos
com a configuração necessária)
a) Exclua todas as dependências declaradas dentro do módulo, o que nos garante que as
dependências declaradas no package.json do projeto não serão adicionadas ao
construir o .jar, adicionando o seguinte:
"exclude":{
"*":true
},

10. b. Importe todas as dependências que você precisa consumir do módulo "Pacote
Compartilhado". Podemos fazer isso através de "config / import" + o nome do provedor. Deve se
parecer mais ou menos com o exemplo abaixo:
"config": {
"importações": {
"common-js-bundle": {
"@ angular / animações": "10.2.2" …
c. Finalmente, se você deseja acessar index.js de seu provedor (projeto de pacote
compartilhado), você só precisa adicioná-lo sem o namespace dentro do "import"
"": {
"common-js-bundle": "^ 1.0.0"
}

11. ● O código final no
arquivo .npmbundlerrc
será parecido com este:

12. L
I
F
E
R
A
Y
Como consumir um Javascript de Biblioteca Compartilhada com React

13. Repositório com exemplo:
https://github.com/RoselaineMarquesMontero/liferay-workspace-shar
ed-library
Mais informações:
How to use Shared Library Javascript with React -
https://liferay.dev/en/b/how-to-use-shared-library-javascript-with-ang
ular-liferay
How to use Shared Library Javascript with Angular -
https://liferay.dev/en/b/how-to-use-shared-library-javascript-with-rea
ct-in-liferay