JavaScript require on client side

Question

Is it possible to use require    or something similar  on client side   Example  var myClass   require    js myclass js

User · Answer

Here s a light weight way to use require and exports in your web client   It s a simple wrapper that creates a  namespace  global variable  and you wrap your CommonJS compatible code in a  define  function like this   namespace lookup  org mydomain mymodule   define function  exports  require        var extern   require  org other module        exports foo   function foo                  More docs here   https   github com mckoss namespace

User · Answer

Simply use Browserify  what is something like a compiler that process your files before it go into production and packs the file in bundles   Think you have a main js file that require the files of your project  when you run browserify in it  it simply process all and creates a bundle with all your files  allowing the use of the require calls synchronously in the browser without HTTP requests and with very little overhead for the performance and for the size of the bundle  for example   See the link for more info  http   browserify org

User · Answer

I ve been using browserify for that  It also lets me integrate Node js modules into my client-side code   I blogged about it here  Add node js CommonJS style require   to client-side JavaScript with browserify

User · Answer

Some answers already - but I would like to point you to YUI3 and its on-demand module loading  It works on both server  node js  and client  too - I have a demo website using the exact same JS code running on either client or server to build the pages  but that s another topic   YUI3  http   developer yahoo com yui 3   Videos  http   developer yahoo com yui theater   Example    precondition  the basic YUI3 functions in 7k yui js have been loaded   YUI         configuration for the loader    use  node   io   own-app-module1   function  Y          sandboxed application code                  If you already have a  Y  instance you can use that instead       of creating a new  sandbox  Y          Y use  moduleX   moduleY   function  Y                      difference to YUI   use    uses the existing  Y -sandbox     This code loads the YUI3 modules  node  and  io   and the module  own-app-module1   and then the callback function is run  A new sandbox  Y  with all the YUI3 and own-app-module1 functions is created  Nothing appears in the global namespace  The loading of the modules   js files  is handled by the YUI3 loader  It also uses  optional  not show here  configuration to select a -debug or -min ified  version of the modules to load

User · Answer

I asked myself the very same questions  When I looked into it I found the choices overwhelming    Fortunately I found this excellent spreadsheet that helps you choice the best loader based on your requirements   https   spreadsheets google com lv key tDdcrv9wNQRCNCRCflWxhYQ

User · Answer

The clientside-require library provides an asynchronous load   function that can be used to load any JS file or NPM module  which uses module exports   any  css file  any  json  any  html  any any other file as text    e g    npm install clientside-require --save   lt script src     node modules clientside-require dist bundle js  gt  lt  script gt   lt script gt  load  color-name      an npm module     then color name  gt           console log color name blue      outputs   0  0  255         lt  script gt    A really cool part of this project is that inside of any load  ed script  you can use the synchronous require   function the same way you would expect in node js    e g     load   path to functionality js     and inside  path to functionality js   var query string   require  qs      an npm module module exports   function name       return qs stringify            name name           time new Date             That last part  implementing the synchronous require   method  is what enables it to utilize NPM packages built to run on the server      This module was designed to implement the require functionality as closely as possible in the browser  Disclaimer  I have written this module

User · Answer

I find the component project giving a much more streamlined workflow than other solutions  including require js   so I d advise checking out https   github com component component   I know this is a bit late answer but may be useful to someone

User · Answer

You can create elements to the DOM  which loads items   Like such   var myScript   document createElement  script       Create new script element myScript type    text javascript      Set appropriate type myScript src      js myclass js      Load javascript file

User · Answer

You should look into require js or head js for this

User · Answer

I have found that in general it is recommended to preprocess scripts at compile time and bundle them in one  or very few  packages with the require being rewritten to some  lightweight shim  also at compile time   I ve Googled out following  new  tools that should be able to do it   http   mixu net gluejs  https   github com jrburke almond https   github com component builder2 js   And the already mentioned browserify should also fit quite well - http   esa-matti suuronen org blog 2013 04 15 asynchronous-module-loading-with-browserify   What are the module systems all about    Older Stack Overflow explanation - Relation between CommonJS  AMD and RequireJS  Detailed discussion of various module frameworks and the require   they need is in Addy Osmani - Writing Modular JavaScript With AMD  CommonJS  amp  ES Harmony

User · Answer

Yes it is very easy to use  but you need to load javascript file in browser by script tag    lt script src  module js  gt  lt  script gt     and then user in js file like   var moduel   require    module      I am making a app using electron and it works as expected

User · Answer

Take a look at requirejs project

User · Answer

Here s a solution that takes a very different approach  package up all the modules into a JSON object and require modules by reading and executing the file content without additional requests   https   github com STRd6 require blob master main coffee md  STRd6 require depends on having a JSON package available at runtime  The require function is generated for that package  The package contains all the files your app could require  No further http requests are made because the package bundles all dependencies  This is as close as one can get to the Node js style require on the client   The structure of the package is as follows   entryPoint   main  distribution    main       content   alert   It worked            dependencies     lt name gt    lt a package gt    Unlike Node a package doesn t know it s external name  It is up to the pacakge including the dependency to name it  This provides complete encapsulation   Given all that setup here s a function that loads a file from within a package   loadModule    pkg  path  - gt    unless  file   pkg distribution path       throw  Could not find file at   path  in   pkg name       program   file content   dirname   path split fileSeparator  0   -1  join fileSeparator     module       path  dirname     exports        context       require  generateRequireFn pkg  module              global  global     module  module     exports  module exports     PACKAGE  pkg       filename  path       dirname  dirname    args   Object keys context    values   args map  name  - gt  context name     Function args     program  apply module  values     return module   This external context provides some variable that modules have access to   A require function is exposed to modules so they may require other modules   Additional properties such as a reference to the global object and some metadata are also exposed   Finally we execute the program within the module and given context   This answer will be most helpful to those who wish to have a synchronous node js style require statement in the browser and are not interested in remote script loading solutions

User · Answer

If you want to have Node js style require you can use something like this   var require    function          var cache           function loadScript url            var xhr   new XMLHttpRequest                fnBody          xhr open  get   url  false           xhr send            if  xhr status     200  amp  amp  xhr getResponseHeader  Content-Type        application x-javascript                 fnBody    var exports       n    xhr responseText     nreturn exports                cache url     new Function fnBody   call                          function resolve module              TODO resolve urls         return module            function require module            var url   resolve module           if   Object prototype hasOwnProperty call cache  url                 loadScript url                     return cache url             require cache   cache      require resolve   resolve      return require          Beware  this code works but is incomplete  especially url resolving  and does not implement all Node js features  I just put this together last night   YOU SHOULD NOT USE THIS CODE in real apps but it gives you a starting point  I tested it with this simple module and it works   function hello         console log  Hello world        exports hello   hello

[javascript] JavaScript require() on client side

Examples related to javascript

Examples related to node.js