Como adicionar um arquivo Javascript customizado no Magento 2

Post rápido ensinando a como adicionar um arquivo Javascript customizado no Magento 2 utilizando o RequireJS.

Javascript customizado no Magento 2

Para carregar um arquivo “exemplo.js” em todas as páginas (utilizando RequireJS)

Crie o arquivo exemplo.js

Crie o arquivo exemplo no diretório do tema:

<theme_dir>/web/js/exemplo.js

com o seguinte conteúdo:

define([
  "jquery"
], 
function($) {
  "use strict";

  console.log('carregou');

});

No exemplo acima, estamos definindo a dependência com a biblioteca jQuery.

Adicionando exemplo.js com o arquivo requirejs-config.js

Crie o arquivo requirejs-config.js no seguinte diretório:

<theme_dir>/requirejs-config.js

Com o conteúdo:

var config = {

  // Quando carregado requirejs, sempre carregar os arquivos a seguir
  deps: [
    "js/exemplo"
  ]

};

“js/exemplo” é o caminho para nosso arquivo exemplo.js. A extensão “js” não é necessária.

Nosso requirejs-config.js será mesclado com os outros requirejs-config.js definidos no Magento.

RequireJS carregará o nosso exemplo.js em todas as páginas, já com as suas dependências e carregando o arquivo de forma async.