Node-style wymagają dla javascript w przeglądarce? [zamknięte]

zamknięte. to pytanie nie spełnia wytycznych dotyczących przepełnienia stosu. Obecnie nie przyjmuje odpowiedzi.

chcesz poprawić to pytanie? Zaktualizuj pytanie, aby było on-topic dla przepełnienia stosu.

Zamknięte w zeszłym miesiącu .

Popraw to pytanie

Czy są jakieś biblioteki dla javascript w przeglądarce, które zapewniają taką samą elastyczność/modułowość / łatwość użycia Jak require węzła?

Aby podać więcej szczegółów: powód require jest tak dobrze, że to:

  1. pozwala na dynamiczne ładowanie kodu z innych lokalizacji (co jest stylistycznie lepsze, moim zdaniem, niż łączenie całego kodu w HTML)
    2. [[37]} zapewnia spójny interfejs do budowania modułów
  2. łatwo jest zależeć od innych modułów (więc mogę napisać na przykład API, które wymaga jQuery, więc mogę używać jQuery.ajax()
  3. załadowany javascript jest scoped , co oznacza, że mogę załadować z var dsp = require("dsp.js"); i będzie w stanie uzyskać dostęp dsp.FFT, co nie koliduje z moim lokalnym var FFT

Nie znalazłem jeszcze biblioteki, która robi to skutecznie. Obejścia, których używam, to:

  • Coffeescript-concat -- łatwo jest wymagać innych js, ale trzeba go skompilować, co oznacza, że jest mniej świetny do szybkiego rozwoju (np. budowanie API w teście)

  • RequireJS -- jest popularny, prosty i rozwiązuje 1-3, ale brak scopingu jest prawdziwym łamaczem transakcji (wierzę, że {61]}Głowa.js jest podobny w tym, że brakuje mu zakresu, choć nigdy nie miałem okazji go użyć. Podobnie, LABjs Może ładować i .wait() łagodzi problemy z zależnościami, ale nadal nie wykonuje zakresów)

Z tego, co wiem, wydaje się, że istnieje wiele rozwiązań do dynamicznego i/lub asynchronicznego ładowania javascript, ale mają one zwykle te same problemy z zakresem, co samo ładowanie js z HTML. Ponad wszystko w przeciwnym razie chciałbym sposób, aby załadować javascript, który nie zanieczyszcza globalnej przestrzeni nazw w ogóle, ale nadal pozwala mi ładować i używać bibliotek(tak jak wymaga węzeł).

2020 aktualizacja: Moduły są obecnie standardem w ES6, a od połowy 2020 są natywnie obsługiwane przez większość przeglądarek. Moduły obsługują zarówno ładowanie synchroniczne, jak i asynchroniczne (przy użyciu Promise). Moim obecnym zaleceniem jest to, że większość nowych projektów powinna używać modułów ES6 i używać transpilera powrót do jednego pliku JS dla starszych przeglądarek.

Ogólnie rzecz biorąc, przepustowość jest dziś zwykle znacznie szersza niż wtedy, gdy pierwotnie zadałem to pytanie. Tak więc w praktyce można rozsądnie wybrać zawsze użycie transpilera z modułami ES6 i skupić się na wydajności kodu, a nie na sieci.

Poprzednia edycja (lub jeśli nie lubisz modułów ES6): od czasu napisania tego, szeroko używałem RequireJS (który teraz ma znacznie jaśniejszy dokumentacja). RequireJS naprawdę był właściwym wyborem moim zdaniem. Chciałbym wyjaśnić, jak działa system dla ludzi, którzy są tak zdezorientowani, jak ja: {]}

Możesz używać require w codziennym rozwoju. Moduł może być dowolnym zwracanym przez funkcję (zazwyczaj obiekt lub funkcję) i jest skalowany jako parametr. Możesz również skompilować swój projekt do jednego pliku do wdrożenia za pomocą r.js (w praktyce jest to prawie zawsze szybsze, nawet jeśli {[0] } Może ładować skrypty w równolegle).

Główną różnicą między RequireJS i node-style require jak browserify (fajny projekt sugerowany przez tjamesona) używa jest sposób, w jaki moduły są projektowane i wymagane:]}
  • RequireJS używa AMD (Async Module Definition). W AMD require pobiera listę modułów (plików javascript) do załadowania i funkcję zwrotną. Po załadowaniu każdego z modułów, wywołuje callback z każdym modułem jako parametr do callback. Jest więc prawdziwie asynchroniczna i dlatego dobrze nadaje się do sieci.
  • Node używa CommonJS. W CommonJS, require jest wywołaniem blokującym, które ładuje moduł i zwraca go jako obiekt. Działa to dobrze dla węzła, Ponieważ pliki są odczytywane z systemu plików, co jest wystarczająco szybkie, ale działa słabo w Internecie, ponieważ ładowanie plików synchronicznie może trwać znacznie dłużej.

W praktyce wielu programistów używało Node (a więc CommonJS), zanim kiedykolwiek zobaczyli AMD. Ponadto wiele bibliotek/modułów jest pisanych dla CommonJS (poprzez dodanie rzeczy do obiektu exports) zamiast dla AMD (zwracając moduł z funkcji define). W związku z tym wielu programistów pracujących nad węzłami chce korzystać z bibliotek CommonJS w Internecie. Jest to możliwe, ponieważ ładowanie ze znacznika <script> jest blokowane. Rozwiązania takie jak browserify pobierają Moduły CommonJS (Node) i zawijają je, dzięki czemu można je dołączyć do znaczników skryptu.

Dlatego, jeśli tworzysz własny projekt wielotematyczny dla sieci, zdecydowanie polecam RequireJS, ponieważ jest to naprawdę system modułowy dla sieci (choć szczerze mówiąc, uważam AMD znacznie bardziej naturalny niż CommonJS). W ostatnim czasie rozróżnienie stało się mniej ważne, ponieważ RequireJS pozwala teraz zasadniczo używać składni CommonJS. Dodatkowo RequireJS może być używany do ładowania modułów AMD w Node(chociaż wolę node-amd-loader ).

Author: Alex Churchill, 2011-08-07
Source

7 answers

Zobacz ender . To robi wiele z tego.

Również, browserify jest całkiem dobry. Użyłem require-kiss 1 i działa. Pewnie są inni.

Nie jestem pewien co do wymagań. To nie to samo co node. możesz napotkać problemy z ładowaniem z innych lokalizacji, ale to może zadziałać. Tak długo, jak istnieje metoda dostarczania lub coś, co można nazwać.

TL; DR - Polecam browserify lub wymagaj-Pocałuj.

Update:

1: require-kiss jest teraz martwy, a autor go usunął. Od tego czasu używam RequireJS bez problemów. Autor require-kiss napisał pakmanager i pakman . Pełna jawność, pracuję z deweloperem.

Osobiście bardziej lubię wymagania. Jest o wiele łatwiejsze do debugowania (możesz mieć oddzielne pliki w rozwoju, a jeden wdrożony plik w produkcji) i jest zbudowany na solidnej "standard".

 17
Author: beatgammit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-16 07:56:31

Napisałem mały skrypt, który umożliwia asynchroniczne i synchroniczne ładowanie plików Javascript, co może być tutaj przydatne. Nie ma zależności i jest kompatybilny z węzłem.js & CommonJS. Instalacja jest dość prosta: 

$ npm install --save @tarp/require

Następnie dodaj następujące linie do HTML, aby załadować main-module: 

<script src="/node_modules/@tarp/require/require.min.js"></script>
<script>Tarp.require({main: "./scripts/main"});</script>

Wewnątrz twojego głównego modułu (i każdego podmodułu, oczywiście) możesz użyć require() tak jak znasz to z CommonJS/NodeJS. Pełne dokumenty i Kod można znaleźć na GitHub .

 16
Author: Torben,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-24 20:28:43

Zdaję sobie sprawę, że mogą być początkujący, którzy chcą uporządkować swój kod. To jest 2020, a jeśli rozważasz modułową aplikację JS, powinieneś zacząć od npm i Webpack już teraz.

Oto kilka prostych kroków na początek:

    W tym celu uruchom program npm, aby zainicjować projekt npm.]}
  1. Pobierz pakiet modułu Webpack: npm install webpack webpack-cli
  2. Utwórz indeks.plik html: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>App</title>
</head>
<body>
    
    <script src="_bundle.js"></script>
</body>
</html>

Pay special uwaga na plik _bundle.js - będzie to ostateczny plik JS wygenerowany przez webpack, nie będziesz go bezpośrednio modyfikować (Czytaj dalej).

  1. Utwórz <project-root>/app.js, do którego zaimportujesz inne moduły: 
const printHello = require('./print-hello');

printHello();
  1. Utwórz przykładowy moduł print-hello.js: 
module.exports = function() {
    console.log('Hello World!');
}
  1. Utwórz <project-root>/webpack.config.js i skopiuj-wklej: 
var path = require('path');

module.exports = {
  entry: './app.js',
  output: {
    path: path.resolve(__dirname),
    filename: '_bundle.js'
  }
};

W powyższym kodzie są 2 punkty:

  • wpis app.js to miejsce, w którym napiszesz swój kod JS. Będzie importować inne moduły jak pokazano powyżej.
  • output _bundle.js to ostateczny pakiet wygenerowany przez webpack. To jest to, co twój html zobaczy na końcu.

-7. Otwórz package.js i zastąp scripts następującym poleceniem: 

  "scripts": {
    "start": "webpack --mode production -w"
  },
  1. i na koniec uruchom skrypt watch app.js i wygeneruj plik _bundle.js uruchamiając: npm start.
  2. Enjoy coding!
 10
Author: Ilyas Assainov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-11 08:45:13

Odmiana Ilya Kharlamov świetna odpowiedź , z kodem, który sprawi, że będzie przyjemnie grać z narzędziami programistycznymi 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<moduleStart+6) moduleStart = source.indexOf('\n',CDTcomment);
                    source = source.slice(moduleStart+1,moduleEnd-1); 
                } 
                // fix, add comment to show source on Chrome Dev Tools
                source="//@ sourceURL="+window.location.origin+url+"\n" + source;
                //------
                var module = { id: url, uri: url, exports:exports }; //according to node.js modules 
                var anonFn = new Function("require", "exports", "module", source); //create a Fn with module code, and 3 params: require, exports & module
                anonFn(require, exports, module); // call the Fn, Execute the module
                require.cache[url]  = exports = module.exports; //cache obj exported by module
            } catch (err) {
                throw new Error("Error loading module "+url+": "+err);
            }
    }
    return exports; //require returns object exported by module
}
///- END REQUIRE FN
 9
Author: Lucio M. Tato,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:24 
(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];
    }
})();

Lepiej nie używać w produkcji ze względu na blokowanie. (In node.js, require () jest wywołaniem blokującym).

 5
Author: Ilya Kharlamov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-05 01:29:06

Require-stub - zapewnia zgodne z węzłami require w przeglądarce, rozwiązuje zarówno moduły, jak i ścieżki względne. Używa techniki podobnej do TKRequire (XMLHttpRequest). Wynikowy kod jest w pełni możliwy do przeglądania, ponieważ {[1] } może służyć jako zamiennik dla watchify.

 1
Author: dy_,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-11 07:15:58

Webmake łączy Moduły w stylu węzła z przeglądarką, spróbuj.

 0
Author: Mariusz Nowak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-26 18:58:49