1

Meu projeto possui vários módulos AMD que estão sendo carregados no browser pelo RequireJS.

No entanto, estou migrando do JavaScript para o TypeScript e também quero utilizar o Gulp para fazer a transpilação para o JavaScript e gerar um arquivo bundle.js que conterá todos os módulos já transpilados e concatenados.

Porém, não sei como carregar esse bundle.js no browser.

Antes de usar o TypeScript eu fazia assim:

  1. Definia um arquivo boot.js que explicitava os módulos:
requirejs.config({
  baseUrl: '/',
  paths: {
    /* ========================== libs ========================== */
    jquery: '/node-dependencies/jquery/dist/jquery',
    ace: '/node-dependencies/ace-builds/src',
    vis: '/node-dependencies/visjs-network/dist/',
    jsYaml: '/node-dependencies/js-yaml/dist/js-yaml',
    bootstrap: '/node-dependencies/bootstrap/dist/js/bootstrap.bundle',
    fontawesome: '/node-dependencies/@fortawesome/fontawesome-free/js/all',
    toastr: '/node-dependencies/toastr/build/toastr.min',
    /* ========================== app ========================== */
    aceEditor: 'app/js/aceEditor',
    btnLoadFile: 'app/js/btnLoadFile',
    btnValidateYaml: 'app/js/btnValidateYaml',
    graphEditor: 'app/js/graphEditor',
    btnBuild: 'app/js/btnBuild',
    btnExecute: 'app/js/btnExecute',
    loadingScreen: 'app/js/loadingScreen',
    Task: 'app/js/Task',
    Digraph: 'app/js/Digraph',
    experiment: 'app/js/experiment',
    app: 'app/js/app',
    yamlParser: 'app/js/yamlParser',
    taskInfo: 'app/js/taskInfo',
    Button: 'app/js/Button'
  }
});

requirejs(['jquery'], function () {
  requirejs(['bootstrap', 'fontawesome'], function () {
    requirejs(['loadingScreen'], function (loadingScreen) {
      loadingScreen.show();
      requirejs([
        'aceEditor',
        'btnLoadFile',
        'graphEditor',
        'btnExecute',
        'btnValidateYaml',
        'btnBuild'], function () {
        requirejs(['app'], () => $(document).ready(loadingScreen.hide));
      });
    });
  });
});
  1. Carregava o boot.js no browser da seguinte forma:
<script src="/node-dependencies/requirejs/require.js" data-main="/app/js/boot.js"></script>

Minhas dúvidas são:

  1. Dado o arquivo bundle.js gerado pelo Gulp, como eu faço para que ele seja carregado no browser?

  2. Eu ainda preciso explicitar os módulos no boot.js sendo que eles já estarão todos dentro do mesmo arquivo?

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .