Bundling with Babel into Vanilla JS

Question

we are currently work with self-developed PHP MVC Framework that is intertwined HTML (Views), PHP files and included JS with script tags. (JQuery, Bootstrap and some old-fashioned JS libs)

While in steps of development, we don't want to control which method is not supported by any browser, so I decided to use Babel without Webpack. Initialized NPM and configured Babel as these lines:

babel.config.json:

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": false,
          "useBuiltIns": "usage", // alternative mode: "entry"
          "corejs": 3, // default would be 2
          "targets": "> 0.2%, not dead"
          // set your own target environment here (see Browserslist)
        }
      ]
    ],
    "plugins": [
      [
        "@babel/plugin-transform-runtime",
        {"version": "7.16.10"}
      ]
    ],
    "sourceType": "script"
}

created src folder and I applied the same layout, following the folder layout.

src/templates/client/default/assets/js/loader.js:

window.initialiseApp = [];
console.log('debug loader: ', { window, initialiseApp: window.initialiseApp})

window.addEventListener("load", function(){
    var loadScreen = document.getElementById("load-screen");

    if (!!loadScreen && !!window) // && !!$
    {
        var metaLang = document.querySelector('meta[name="lang"]');

        var defaultLang = 'tr';
        if (metaLang.content !== 'null')
            defaultLang = metaLang.content
        else {
            var storedLang = window.localStorage.getItem('Lang');
            if (storedLang)
                defaultLang = storedLang;
        }

        const [ selectedLang, selectLang ] = window.helper.useState('Lang', defaultLang, true);

        fetch(window.helper.URI.getURI("app/templates/client/default/assets/js/lang/"+defaultLang+".json"))
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                const [ selectedLangValues, selectLangValues ] = window.helper.useState('LangValues', data, true);

                var toggleLangButtons = document.querySelectorAll('.lang-toggle');

                controlLang(defaultLang);

                toggleLangButtons.forEach(function(toggleLangButton) {
                    if (toggleLangButton.classList.contains('lang-active'))
                        toggleLangButton.addEventListener('click', function(event) {
                            event.preventDefault();
                            event.stopPropagation();
                        })
                    else
                        toggleLangButton.addEventListener('click', function () {
                            toggleLang(toggleLangButton)
                        })
                })
            })
            .then(async () => {
                await Promise.all(window.initialiseApp.map(async function(func) {
                    func()
                }));

                loadScreen.classList.add('done');
            });
        /* setTimeout(() => loadScreen.classList.remove('done'), 2500) */
    }
    /* if (loadScreen && window && window.states)
        document.body.removeChild(loadScreen); */
});

Settled in npm/scripts/build as: npx babel src --out-dir app

Then here is the output, /app/templates/client/default/assets/js/loader.js:

var _regeneratorRuntime = require("@babel/runtime/regenerator");

var _asyncToGenerator = require("@babel/runtime/helpers/asyncToGenerator").default;

var _slicedToArray = require("@babel/runtime/helpers/slicedToArray").default;

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.promise.js");

require("core-js/modules/web.dom-collections.for-each.js");

require("core-js/modules/es.array.iterator.js");

require("core-js/modules/es.string.iterator.js");

require("core-js/modules/web.dom-collections.iterator.js");

require("core-js/modules/es.array.map.js");

window.initialiseApp = [];
console.log('debug loader: ', {
  window: window,
  initialiseApp: window.initialiseApp
});
window.addEventListener("load", function () {
  var loadScreen = document.getElementById("load-screen");

  if (!!loadScreen && !!window) // && !!$
    {
      var metaLang = document.querySelector('meta[name="lang"]');
      var defaultLang = 'tr';
      if (metaLang.content !== 'null') defaultLang = metaLang.content;else {
        var storedLang = window.localStorage.getItem('Lang');
        if (storedLang) defaultLang = storedLang;
      }

      var _window$helper$useSta = window.helper.useState('Lang', defaultLang, true),
          _window$helper$useSta2 = _slicedToArray(_window$helper$useSta, 2),
          selectedLang = _window$helper$useSta2[0],
          selectLang = _window$helper$useSta2[1];

      fetch(window.helper.URI.getURI("app/templates/client/default/assets/js/lang/" + defaultLang + ".json")).then(function (response) {
        return response.json();
      }).then(function (data) {
        var _window$helper$useSta3 = window.helper.useState('LangValues', data, true),
            _window$helper$useSta4 = _slicedToArray(_window$helper$useSta3, 2),
            selectedLangValues = _window$helper$useSta4[0],
            selectLangValues = _window$helper$useSta4[1];

        var toggleLangButtons = document.querySelectorAll('.lang-toggle');
        controlLang(defaultLang);
        toggleLangButtons.forEach(function (toggleLangButton) {
          if (toggleLangButton.classList.contains('lang-active')) toggleLangButton.addEventListener('click', function (event) {
            event.preventDefault();
            event.stopPropagation();
          });else toggleLangButton.addEventListener('click', function () {
            toggleLang(toggleLangButton);
          });
        });
      }).then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                _context2.next = 2;
                return Promise.all(window.initialiseApp.map( /*#__PURE__*/function () {
                  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(func) {
                    return _regeneratorRuntime.wrap(function _callee$(_context) {
                      while (1) {
                        switch (_context.prev = _context.next) {
                          case 0:
                            func();

                          case 1:
                          case "end":
                            return _context.stop();
                        }
                      }
                    }, _callee);
                  }));

                  return function (_x) {
                    return _ref2.apply(this, arguments);
                  };
                }()));

              case 2:
                loadScreen.classList.add('done');

              case 3:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2);
      })));
      /* setTimeout(() => loadScreen.classList.remove('done'), 2500) */
    }
  /* if (loadScreen && window && window.states)
      document.body.removeChild(loadScreen); */

});

However, I encountered a problem:

loader.js:1 Uncaught ReferenceError: require is not defined at loader.js:1:27

What should I do, could you give any advices ? I do not want to use Webpack and another extra load on the processor.

Answer 1

require can be defined via the usage of RequireJS. You will need to make sure that it is defined before your call to require either with a script tag or by downloading the content of the library and prepending yours with it.