Nó de estilo requer para o javascript do navegador?

Há alguma biblioteca para JavaScript no navegador que forneça a mesma flexibilidade / modularidade / facilidade de uso que o Node require ?

Para fornecer mais detalhes: o motivo é tão bom é que:

  1. Permite que o código seja carregado dinamicamente a partir de outros locais (o que é estilisticamente melhor, na minha opinião, do que vincular todo o seu código no HTML)
  2. Ele fornece uma interface consistente para construir módulos
  3. É fácil para os módulos dependerem de outros módulos (então eu poderia escrever, por exemplo, uma API que requer jQuery para que eu possa usar jQuery.ajax()
  4. Javascript carregado é escopo , o que significa que eu poderia carregar com var dsp = require("dsp.js"); e eu seria capaz de acessar dsp.FFT , que não iria interferir com o meu local var FFT

Eu ainda tenho que encontrar uma biblioteca que faça isso de forma eficaz. As soluções que eu costumo usar são:

Tanto quanto eu posso dizer, parece haver muitas soluções para o carregamento dynamic e / ou asynchronous de javascript, mas eles tendem a ter os mesmos problemas de escopo como apenas carregando o js de HTML. Mais do que qualquer outra coisa, gostaria de uma maneira de carregar o javascript que não polua o namespace global, mas ainda permite que eu carregue e use bibliotecas (assim como o require do nó faz).

EDIT (MY ANSWER): Desde que escrevi isso, eu usei extensivamente o RequireJS (que agora tem uma documentação muito mais clara). RequireJS realmente foi a escolha certa na minha opinião. Eu gostaria de esclarecer como o sistema funciona para pessoas tão confusas quanto eu:

Você pode usar require no desenvolvimento diário. Um módulo pode ser qualquer coisa retornada por uma function (normalmente um object ou uma function) e tem o escopo definido como um parâmetro. Você também pode compilar seu projeto em um único arquivo para implementação usando r.js (na prática, isso é quase sempre mais rápido, mesmo que require possa carregar scripts em paralelo).

A principal diferença entre RequireJS e estilo de nó requer que os usos de browserify (um projeto interessante sugerido por tjameson) sejam a maneira como os módulos são projetados e requeridos:

  • O RequireJS usa AMD (Definição do Módulo Assíncrono). Na AMD, require leva uma lista de módulos (arquivos javascript) para carregar e uma function de retorno de chamada. Quando carregou cada um dos módulos, ele chama o retorno de chamada com cada módulo como um parâmetro para o retorno de chamada. Assim, é verdadeiramente asynchronous e, portanto, adequado para a web.
  • O nó usa o CommonJS. No CommonJS, require é uma chamada de bloqueio que carrega um módulo e o retorna como um object. Isso funciona bem para o Node, porque os arquivos são lidos no sistema de arquivos, o que é rápido o suficiente, mas funciona mal na web porque o carregamento de arquivos de forma síncrona pode levar muito mais tempo.

Na prática, muitos desenvolvedores usaram o Node (e, portanto, o CommonJS) antes mesmo de verem a AMD. Além disso, muitas bibliotecas / módulos são gravados para o CommonJS (adicionando coisas a um object de exports ) em vez de para o AMD (retornando o módulo da function define ). Portanto, muitos desenvolvedores da Web que usam o Node desejam usar as bibliotecas CommonJS na Web. Isso é possível, pois o carregamento de uma tag está bloqueando. Soluções como o browserify usam módulos CommonJS (Node) e os envolvem para que você possa incluí-los com tags de script.

Portanto, se você está desenvolvendo seu próprio projeto de multi-arquivos para a web, eu recomendo fortemente o RequireJS, já que ele é verdadeiramente um sistema de módulos para a web (embora na divulgação justa, eu ache a AMD muito mais natural que CommonJS). Recentemente, a distinção tornou-se menos importante, já que o RequireJS agora permite que você use essencialmente a syntax do CommonJS. Além disso, o RequireJS pode ser usado para carregar módulos AMD no Node (embora eu prefira o node-amd-loader ).

Confira ender . Faz muito disso.

Além disso, o browserify é muito bom. Eu usei require-kiss e funciona. Existem provavelmente outros.

Não tenho certeza sobre o RequireJS. Não é o mesmo que o nó. Você pode ter problemas com o carregamento de outros locais, mas pode funcionar. Contanto que haja um método de fornecimento ou algo que possa ser chamado.

TL; DR – Eu recomendaria browserify ou exigir beijo.

Atualizar:

require-kiss está morto e o autor o removeu. Desde então, tenho usado o RequireJS desde então sem problemas. O autor de require-kiss escreveu pakmanager e pakman . Divulgação completa, eu trabalho com o desenvolvedor.

Pessoalmente eu gosto de RequireJS melhor. É muito mais fácil depurar (você pode ter arquivos separados em desenvolvimento e um único arquivo implantado em produção) e é construído em um “padrão” sólido.

Eu escrevi um pequeno script que permite o carregamento asynchronous e síncrono de arquivos JavaScript, que podem ser de alguma utilidade aqui. Não tem dependencies e é compatível com o Node.js & CommonJS. Você pode até agrupar vários módulos em um arquivo para reduzir solicitações HTTP em servidores de produção. O uso é bem fácil:

   

Mais detalhes e o código podem ser encontrados no meu blog: http://pixelsvsbytes.com/2013/02/js-require-for-browsers-better-faster-stronger/ O código também está no GitHub: https: // github .com / letorbi / smoothie / blob / master / standalone / require.js

Uma variação de Ilya Kharlamov grande resposta , com algum código para torná-lo jogar legal com ferramentas de desenvolvedor do Chrome.

 // ///- REQUIRE FN // equivalent to require from node.js function require(url){ if (url.toLowerCase().substr(-3)!=='.js') url+='.js'; // to allow loading without js suffix; if (!require.cache) require.cache=[]; //init cache var exports=require.cache[url]; //get from cache if (!exports) { //not cached try { exports={}; var X=new XMLHttpRequest(); X.open("GET", url, 0); // sync X.send(); if (X.status && X.status !== 200) throw new Error(X.statusText); var source = X.responseText; // fix (if saved form for Chrome Dev Tools) if (source.substr(0,10)==="(function("){ var moduleStart = source.indexOf('{'); var moduleEnd = source.lastIndexOf('})'); var CDTcomment = source.indexOf('//@ '); if (CDTcomment>-1 && CDTcomment 
 (function () { // c is cache, the rest are the constants var c = {},s="status",t="Text",e="exports",E="Error",r="require",m="module",S=" ",w=window; w[r]=function R(url) { url+=/.js$/i.test(url) ? "" : ".js";// to allow loading without js suffix; var X=new XMLHttpRequest(),module = { id: url, uri: url }; //according to the modules 1.1 standard if (!c[url]) try { X.open("GET", url, 0); // sync X.send(); if (X[s] && X[s] != 200) throw X[s+t]; Function(r, e, m, X['response'+t])(R, c[url]={}, module); // Execute the module module[e] && (c[url]=module[e]); } catch (x) { throw w[E](E+" in "+r+": Can't load "+m+S+url+":"+S+x); } return c[url]; } })(); 

Melhor não usar na produção por causa do bloqueio. (Em node.js, require () é uma chamada de bloqueio está bem).

Webmake empacota módulos estilo Nó para o Navegador, experimente.

Require-stub – fornece requerimento no navegador, resolve os módulos e os caminhos relativos. Usa técnica similar a TKRequire (XMLHttpRequest). O código resultante é totalmente navegável, pois o require-stub pode replace o watchify .

Aqui está uma extensão da fantástica resposta de Lucio M. Tato, que permite o carregamento recursivo de módulos com caminhos relativos.

Aqui está um projeto do github para abrigar a solução e um exemplo de como usá-lo:

https://github.com/trausti/TKRequire.js

Para usar o TKRequire.js, inclua a seguinte linha no seu header

Em seguida, carregue módulos como em node.js:

var MyModule = require ("./ relative / path / para / MyModule.js");

Intereting Posts