0

guys. I'm used to load libraries doing require('library') in NodeJS. Now I am in charge of the frontend in a very important project which hopefully will bring to my life the happiness I deserve.

The thing is no one has ever managed to pull a easy, ready-to-go, module loading solution.

  • Webpack: not reliable for development. Requires creating config files and reading a bunch of stuff no one with a good job between hands has time for. Terrible documentation and looks like it will give me a hard time when editing files (I have the browser in one screen and text editor in the other, so I edit a line and press f5 to instantly see the result, doesn't seem to be possible without another extra effort in webpack)

  • Browserify/RequireJS more or less the same, too much trouble

How come no one has been able to replicate the nodejs 'require' system in the browser?? I just want to do require('library') and forget about it. NO unasked config files. NO necessary extra tools. NO bullshit. Just that.

needitohelp
  • 103
  • 2
  • 7
  • `How come no one has been able to replicate the nodejs 'require' system in the browser?` because that's not how javascript was designed back in the last millennium - modules are coming. In the meantime you'll need to use the tools that are available, despite them being "too difficult" for you to use – Jaromanda X Jul 13 '17 at 01:25
  • Webpack doesn't need to be complicated: `webpack src/app.js dist/bundle.js` will bundle up all your requirements, giving `bundle.js`, a browser-ready script. – wbadart Jul 13 '17 at 01:28
  • that's part true...there are custom functions you can implement. https://stackoverflow.com/questions/2598469/jquery-how-to-include-other-js-files-into-js have you tried using jquery's `getScript()`? – Matthew Brent Jul 13 '17 at 01:28
  • You could probably write your own function using `getScript()` where you simply pass in the file location with some kind of logged exception handling incase the GET failed – Matthew Brent Jul 13 '17 at 01:30
  • I'm voting to close this question as off-topic because either it is really literally asking us to speculate why no one has produced a tool that satisfies the OP (the concept of modules *did* exist before JavaScript was conceived so it is *anyone's guess* why the original designers did not include it, and revisions did not include it until now), or it is a rhetorical question which is really asking for a tool recommendation. Off-topic either way. – Louis Jul 13 '17 at 10:29
  • I sympathise, this whole process is very painful. Thought this would be simple to solve but, phew webpack is huge and confusing, requirejs is not clear in their docs and the examples are unclear and though Mathew's answer is extremely informative and veryyy clearly lays out the problem as he says... the script just dumbly loads scripts without an object model hierarchy. I want private functions and loading in scripts so my code is clean... – React Dev Aug 02 '18 at 18:43
  • I think it's a good question, that still requires an answer. Imagine if, in any other development environment, the answer to "how do I import a module" was "well, here's a list of various third-party tools that you can learn and set up in your existing project, they have basically no documentation but that's OK because everyone has to use one of them". Seriously, WTF. – Andrew Koster Mar 23 '19 at 18:26

2 Answers2

5

$.getScript( "ajax/test.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

Having thought about this question some more it's actually quite loaded...

libraries like requireJS or commonJS exist for a reason. There are a few approaches.

Synchronous commonJS approach.

This is no good for modern sites that behave more like apps. They would be SLOW waiting for requested resources to finish downloading all the time. And so

AMD (asynchronous module definition)

becomes the go-to method. Its asynchronous this is where most modern module libraries are currently at. requireJS prescribes to the head.appendChild(script) method. in a nutshell this

var head = document.getElementsByTagName('head')[0], script = document.createElement('script'); script.src = url; head.appendChild(script);

if you really wanted you could write your own library but if I can be frank...if your team are at a place where they need some kind of import function then I find it hard to believe that you can't invest the time to learn a simple library like requireJS. it's popular, robust and simple to pick up.

The super simple load a JS file in another JS file asynchronously solution

This is not a true module solution as it wont solve some of the problems around creating object model hierarchy when called asynchronously. Even so, see the JQuery API here and the SO question here I supplied in the comments.

Take note that the location to the JS file is from the relative path not the root path.

However I would also like to state if the time is taken, webpack can be a very powerful tool to use in a team setting. With NPM its a great way of standardizing front end builds and deployment, also has local test server capabilities straight from command line with hot reloading...you should take a second look ;) here

Matthew Brent
  • 1,366
  • 11
  • 23
1

You could consider SystemJS, it is light and flexible as it loads any module format.

itacode
  • 3,721
  • 3
  • 21
  • 23