RequireJS - Szybki przewodnik

RequireJS to biblioteka JavaScript i program ładujący pliki, który zarządza zależnościami między plikami JavaScript oraz w programowaniu modułowym. Pomaga również poprawić szybkość i jakość kodu.

RequireJS został opracowany przez Davida Marka, a jego pierwotna wersja v1.0.0 została wydana w 2009 roku. Jest to oprogramowanie typu open source, a wersja 2.3.3 jest jego najnowszą stabilną wersją.

Dlaczego warto korzystać z RequireJS?

Jest to biblioteka JavaScript typu open source na licencji MIT.
Zapewnia asynchroniczne ładowanie modułów.
Ma możliwość ładowania zagnieżdżonych zależności.
Jeśli masz wiele małych plików, nie musisz się martwić o śledzenie kolejności zależności.
Zapewnia obsługę wtyczek i ładuje więcej niż jeden plik JavaScript.

Funkcje RequireJS

Zarządza zależnościami między plikami JavaScript i poprawia szybkość i jakość kodu.
Łączy i minimalizuje moduły w jeden skrypt w celu zoptymalizowania działania.
Zmniejsza złożoność kodu w dużych aplikacjach.
Gromadzi różne pliki JavaScript z różnych modułów w momencie kompilacji.
Pozwala na łatwe debugowanie, ponieważ ładuje pliki ze zwykłych tagów skryptów.

W tym rozdziale zrozumiemy, jak skonfigurować środowisko dla RequireJS. W tym celu musisz pobrać najnowszą wersję biblioteki RequireJS. Możesz pobrać wersję zminimalizowaną lub szczegółową .

Po pobraniu musimy dołączyć plik require.js plik w folderze libs, a struktura projektu powinna wyglądać tak, jak pokazano poniżej -

projectname/
|--index.html
|--libs/
   |---main.js
   |---require.js
   |---helper/
      |----util.js

Musimy zdefiniować plik html jako index.html gdzie RequireJS jest ładowana, jak pokazano poniżej.

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

Zauważ, że tylko require.js z wywołaniem RequireJS jest zawarta w tagu script w celu załadowania skryptu.

RequireJS w Node

Istnieją dwa sposoby uzyskania adaptera Node.

npm - Najnowszą wersję requirejs można zainstalować z wiersza poleceń, jak pokazano poniżej.

npm install requirejs

Pobieranie r.js - Możesz pobrać r.jsplik ze strony pobierania i źródło zr.js strona repozytorium .

RequireJS można zainicjować, przekazując główną konfigurację w szablonie HTML za pośrednictwem atrybutu data-main . Jest używany przez RequireJS, aby wiedzieć, który moduł załadować do aplikacji.

Na przykład -

<script data-main = "scripts/main" src = "scripts/require.js"></script>

Aby dołączyć plik Require.js, należy dodać znacznik script do pliku html. W tagu skryptu dodaj rozszerzeniedata-mainatrybut, aby załadować moduł. Można to traktować jako główny punkt wejścia do aplikacji. Skrypty / main jest główny plik JavaScript wniosku, który zawiera konfigurację RequireJS.

Opcje konfiguracji

Poniżej przedstawiono opcje konfiguracji, które można ustawić podczas ładowania pierwszego modułu aplikacji -

baseUrl- Jest to ścieżka trasy dla wszystkich modułów ładowanych przez RequireJS. BaseUrl jest wskazywany przez ciąg zaczynający się od „ukośnika (/)”, zawierający protokół i kończący się rozszerzeniem „.js”. Jeśli nie określono baseUrl, RequireJS używa ścieżki do atrybutu data-main jako baseUrl.
paths- Określa mapowania ścieżek dla modułów, które są względne w stosunku do baseUrl. Podczas mapowania nazwy modułu automatycznie dodaje rozszerzenie .js do ścieżki.
shim - Zapewnia użycie bibliotek innych niż AMD z RequireJS, konfigurując ich zależności i eksportując ich wartości globalne.
map - W przypadku danego modułu aplikacja używa tego samego modułu w różnych wersjach do różnych celów, udostępniając swoje identyfikatory w celu wykorzystania tego samego kodu w różnych warunkach.
config- Dostarcza konfigurację do modułu przy użyciu opcji config i można to zrobić używając specjalnej zależności "module" i wywołując jejmodule.config() funkcjonować.
urlArgs- Argumenty ciągu zapytania służą do pobierania wszystkich zasobów, które są ładowane przy użyciu RequireJS. Służy do pomijania pamięci podręcznej w przypadku nieprawidłowej konfiguracji przeglądarki lub serwera.
waitSeconds- Określa liczbę sekund, które należy czekać, zanim pojawi się podczas ładowania skryptu. Wartość domyślna to „7” sekund, a „0” wyłącza limit czasu.
packages - Dostarcza pakiety CommonJS do konfigurowania modułów ładujących.
context - Zawiera nazwę do ładowania kontekstowego, która umożliwia ładowanie różnych modułów na stronie.
deps - Jest to tablica zależności, która jest wymagana, gdy Require jest określone jako obiekt konfiguracyjny przed załadowaniem RequireJS.
callback - Wykonuje funkcję po załadowaniu zależności i jest wymagana, gdy Require jest określone jako obiekt konfiguracyjny przed załadowaniem RequireJS.
xhtml - Służy do tworzenia elementów skryptu przy użyciu rozszerzenia document.createElementNS()metoda, gdy ta opcja jest ustawiona na true .
scriptType- Definiuje wartość atrybutu typu skryptu używanego w dokumencie. Typ domyślny to „text / javascript”.
skipDataMain- Pomija skanowanie głównych atrybutów danych podczas ładowania modułu, jeśli ta opcja jest ustawiona na true .

Moduł w RequireJS jest obiektem o określonym zakresie i nie jest dostępny w globalnej przestrzeni nazw. W związku z tym globalna przestrzeń nazw nie zostanie zanieczyszczona. Składnia RequireJS pozwala na szybsze ładowanie modułów bez martwienia się o śledzenie kolejności zależności. Na tej samej stronie możesz załadować wiele wersji tego samego modułu.

Definiowanie modułów

Moduł jest definiowany za pomocą define()funkcjonować; ta sama funkcja służy również do ładowania modułu.

Proste pary nazwa / wartość

Jeśli moduł jest tylko zbiorem par nazw i wartości, możesz użyć następującej składni -

define({
   state: "karnataka",
   city: "bangalore"
});

Definiowanie funkcji

Moduł może również używać funkcji dla frameworków bez zależności. Można to zrobić za pomocą następującej składni -

define(function () {
   
   //Do setup work here
   return {
      state: "karnataka",
      city: "bangalore"
   }
});

Definiowanie funkcji za pomocą zależności

Jeśli moduł ma zależności, umieszczenie pierwszego argumentu (tablica nazw zależności), drugiego argumentu (funkcja definiująca) i zwracanego obiektu, który definiuje moduł, jest pokazane w następującej składni -

define(["./mnc", "./startup"], 
   function(mnc, startup) {
        
      return {
         state: "karnataka",
         city: "bangalore",
      
         addCompany: function() {
            mnc.decrement(this);
            startup.add(this);
         }
      
      }
   }
);

Definiowanie modułu jako funkcji

Moduł nie musi zwracać tylko obiektów, można również zwrócić każdą prawidłową wartość z funkcji. Poniższa składnia służy do definiowania modułu jako funkcji -

define(["./mnc", "./startup"],
   function(mnc, startup) {
       
      return function(title) {
         return title ? (window.title = title) :
         startup.storeName + ' ' + mnc.name;
      }
      
   }
);

Definiowanie modułu za pomocą nazwy

W niektórych przypadkach może być konieczne dołączenie nazwy modułu jako pierwszego argumentu define(). Można to zrobić za pomocą następującej składni -

define("js2/title",
   ["js1/mnc", "js1/startup"],
   
   function(mnc, startup) {
      //Define js2/title object in here.
   }
   
);

Ładowanie modułu

Do załadowania modułów można użyć funkcji define () (moduł może być obiektem, funkcją, klasą lub kodem, który jest wykonywany po załadowaniu modułu). Na tej samej stronie możesz załadować różne wersje tego samego modułu. Różne wersje można analizować w tej samej kolejności, nawet jeśli są ładowane w innej kolejności.

Składnia

define(['module1', 'module2'], function (module1, module2) {
   //define the module value by returning a value
   return function () {};
});

Podczas definiowania modułu można przekazać listę nazw modułów, a RequireJS może zostać użyte do pobrania tych modułów przed wykonaniem modułu. Te moduły można przekazać jako parametry plikudefinition function.

Przykład

Poniższy przykład przedstawia użycie funkcji define () podczas ładowania modułów. Utwórz plik html o nazwie index.html i umieść w nim następujący kod -

<!DOCTYPE html>
<html>
   <head>
      <title>Define() Function</title>
      <script data-main = "main" src = "require.js"></script>
   </head>
   
   <body>
      <h2>RequireJS Define() Function Example</h2>
   </body>
</html>

Stwórz jsplik o nazwie main.js i dodaj w nim następujący kod -

define(function (require) {
   var myteam = require("./team");
   var mylogger = require("./player");
   alert("Player Name : " + myteam.player);
   mylogger.myfunc();
});

Teraz utwórz jeszcze dwa jspliki o nazwach team.js i player.js i umieść odpowiednio następujący kod -

team.js

define({
   player: "Sachin Tendulkar",
   team : "India"
});

player.js

define(function (require) {
   var myteam = require("./team");

   return {
      myfunc: function () {
         document.write("Name: " + myteam.player + ", Country: " + myteam.team);
      }
   };
});

Wynik

Otwórz plik HTML w przeglądarce; otrzymasz dane wyjściowe jak na poniższym zrzucie ekranu -

Kliknij na przycisk „OK”, otrzymasz kolejny wynik z modułów -

W tym rozdziale omówimy optymalizację w RequireJS. Optymalizator w RequireJS ma następujące cechy -

Łączy pliki skryptów razem z pomocą UglifyJS do domyślnego użytku lub Closure Compiler do użytku w Javie
Łączy pliki CSS razem.

Optymalizator jest składnikiem r.jsadapter do Node i Nashorn . Został opracowany jako część procesu kompilacji, a nie do procesu tworzenia.

Przykład

Po pobraniu r.js do folderu projektu, struktura folderu powinna wyglądać tak, jak podano poniżej -

projectfolder/
   |-->index.html
   |-->CSS/
      |--->main.css
      |--->other.css
   |-->libs
      |--->require.js
      |--->main.js
         |--->dependent1.js
         |--->dependent2.js
         |--->dependent3.js

Twój plik HTML będzie wyglądał tak, jak pokazano poniżej -

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

Twój plik main.js będzie wyglądał tak, jak pokazano poniżej -

require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2, 
   dependent3) {
});

Twój plik main.css będzie wyglądał tak, jak pokazano poniżej -

@import url("other.css");

.app {
   background: transparent url(../../img/app.png);
}

Podstawowa konfiguracja Optimizera

Możesz użyć argumentów wiersza poleceń lub właściwości budowania profilu do ustawienia projektu, oba są wymienialne między sobą.

Poniżej znajduje się składnia wiersza poleceń -

node r.js -o baseUrl = . paths.jquery = content/path/jquery 
   name = main out = main-built.js

Poniżej znajduje się składnia profilu budynku -

({
   baseUrl: ".",
  
   paths: {
      jquery: "content/path/jquery"
   },
   
   name: "main",
   out: "main-built.js"
})

Następnie możesz przekazać nazwę profilu kompilacji do optymalizatora w wierszu poleceń, jak pokazano poniżej -

node r.js -o build.js

Składnia argumentów wiersza poleceń ma pewne niedociągnięcia. Łączne użycie argumentów wiersza poleceń lub właściwości budowania profilu może przezwyciężyć te niedociągnięcia.

Optymalizacja pojedynczego pliku JS

Aby zoptymalizować pojedynczy plik JS, musisz utworzyć plik JS zawierający zawartość wszystkich jego zależności. Twój plik powinien wyglądać tak, jak podano poniżej -

({
   baseUrl: "js/shop",
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "department": ["underscore", "jquery"],
         "dependent": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   name: "../main",
   out: "../built/js/main.js"
})

Teraz możesz utworzyć plik main.js , który zawiera wszystkie zależności aplikacji. Ten plik jest używany w pliku HTML do załadowania wszystkich plików JS za pomocą jednego żądania. Zauważ, że utworzone pliki nie powinny znajdować się w katalogu z kodem źródłowym; pliki powinny znajdować się w kopii projektu.

Wykorzystanie zasobów CDN

Optymalizator nie ładuje skryptów korzystających z zasobów sieciowych / CDN (Content Delivery Network). W przypadku, gdy skrypty muszą zostać załadowane za pomocą CDN, musisz zmapować te pliki na nazwę modułu i pobrać pliki do lokalnej ścieżki pliku. Możesz użyć specjalnego słowa „pusty” w konfiguracji ścieżki profilu kompilacji, jak pokazano w następującej składni -

({
   baseUrl: "js",
   name: "mainCDN",
   out: "js/mainCDN-built.js",
   
   paths: {
      jquery: "empty:"
   }
   
})

Główny plik będzie wyglądał tak, jak pokazano poniżej -

requirejs.config({
   paths: {
      'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
   }
});

require(['jquery'], function ($) {
});

Optymalizacja pojedynczego pliku CSS

Pliki CSS są optymalizowane przy użyciu następujących parametrów bezpośrednio w wierszu poleceń, jak pokazano poniżej -

node ../../r.js -o cssIn = main.css out = main-built.css

Pliki CSS można również zoptymalizować w pliku kompilacji przy użyciu tych samych właściwości, jak pokazano poniżej -

...
cssIn:"main.css",
out:"main-built.css"
...

Obie powyższe metody są dozwolone i utworzą plik o nazwie Projectfolder / css / mainbuild.css . Ten plik będzie miał zawartość main.css, odpowiednio dostosowane ścieżki url () i usunięte komentarze.

Optymalizacja całego projektu

Optymalizator używa profilu kompilacji do optymalizacji wszystkich plików css i jsakta. W poniższym przykładzie tworzony jest plik build.js .

({
   baseUrl: "js/shop",
   appDir: '.',
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "deps": ["underscore", "jquery"],
         "exports": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   optimizeCss: "standard.keepLines",
   modules: [
      {
         name: "app"
      }
   ],
   
   dir: "../built"
})

Plik build.js instruuje RequireJS, aby skopiować wszystkie foldery aplikacji (parametr appDir) do zbudowanego folderu wyjściowego (parametr dir) i zastosować wszystkie optymalizacje do plików znajdujących się w folderze wyjściowym. Uruchom następujące polecenie, aby utworzyć profil w folderze aplikacji -

node r.js -o build.js

RequireJS używa jQuery jako kolejnej zależności i rejestruje się jako nazwany moduł jquery małymi literami i domyślnie rejestruje się również przy użyciu funkcji globalnych $ i jQuery podczas korzystania z AMD / RequireJS.

Ładowanie jQuery

require(['jquery'], function($) {
   //code here
}

Możesz załadować wiele bibliotek niestandardowych wraz z jQuery, jak pokazano poniżej -

require(['custom_library_path','jquery'], function(load_library,$) {
   //related code of $ and load_library
});

Poniższa tabela przedstawia użycie jQuery z RequireJS do określenia ich zależności.

Sr.No.	Rodzaje i opis
1	Korzystanie z konfiguracji Shim jQuery używa konfiguracji shim do definiowania zależności dla wtyczek jQuery.
2	Ładowanie jQuery z CDN jQuery używa CDN do definiowania zależności dla wtyczek jQuery.

Adapter węzła może być używany wraz z implementacją ścieżki wyszukiwania Require i Node. Jeśli RequireJS nie używa konfiguracji modułu, możesz użyć istniejących modułów opartych na Node bez ich zmiany. Pakiety węzłów można zainstalować w katalogu node_modules projektu za pomocą polecenia npm.

Węzeł załaduje moduły tylko z dysku lokalnego, a opcje konfiguracyjne, takie jak mapa, pakiety, ścieżki itp. Zostaną zastosowane tylko wtedy, gdy moduł jest ładowany przez RequireJS.

Instalowanie Node

Kartę węzła można zainstalować za pomocą następującego polecenia, które zainstaluje najnowsze pliki wersji -

npm install requirejs

Możesz również zainstalować węzeł w następujący sposób -

Możesz pobrać r.js z tego linku i zachować go w folderze projektu.
Uzyskać źródło z r.js repozytorium lub zainstalować go przez dist.js węzłów .

Wykorzystanie Node

Aby używać węzła, musisz mieć require ('requirejs') i przenieść funkcję require w konfiguracji do pliku main.js najwyższego poziomu.

Na przykład -

var requirejs = require('requirejs');

requirejs.config({
   //load the mode modules to top level JS file 
   //by passing the top level main.js require function to requirejs
   nodeRequire: require
});

requirejs(['name1', 'name2'],
   function (name1, name2) {
      //by using requirejs config, name1 and name2 are loaded
      //node's require loads the module, if they did not find these
   }
);

Budowanie modułów węzłów za pomocą AMD lub RequireJS

Możesz sprawić, by moduł kodu działał z RequireJS i Node, bez wymagania użytkowników biblioteki, a następnie użyj pakietu amdefine , aby wykonać tę pracę.

Na przykład -

if (typeof define !== 'function') {
   var define = require('amdefine')(module);
}

define(function(require) {
   var myval = require('dependency');

   //The returned value from the function can be used 
   //as module which is visible to Node.
   return function () {};
});

Optymalizator jako moduł węzła

Moduł węzła używa optymalizatora RequireJS jako metody optymalizacji , używając wywołania funkcji zamiast narzędzia wiersza poleceń.

Na przykład -

var requirejs = require('requirejs');

var config = {
   baseUrl: '../directory/scripts',
   name: 'main',
   out: '../build/main-built.js'
};

requirejs.optimize(config, function (buildResponse) {

   //The text output of the modules specify by using buildResponse 
   //and loads the built file for the contents
   //get the optimized file contents by using config.out 
   var contents = fs.readFileSync(config.out, 'utf8');
}, function(err) {
   //code for optimization err callback
});

Dojo to zestaw narzędzi JavaScript oparty na architekturze modułów AMD, który zapewnia dodatkowe moduły w celu dodania dodatkowej funkcjonalności do aplikacji internetowej, a także oszczędza czas i skalę w procesie tworzenia aplikacji internetowych.

Przykład

Poniższy przykład pokazuje użycie Dojo wraz z RequireJS. Utwórz plik html o nazwie index.html i umieść w nim następujący kod -

<!DOCTYPE html>
<html>
   <head>
      <title>RequireJS Dojo</title>
      <script data-main="app" src="lib/require.js"></script>
   </head>
   
   <body>
      <h2>RequireJS  Dojo</h2>
      <p>
         Hello... ...
      </p>
   </body>
</html>

Stwórz jsplik o nazwie app.js i dodaj w nim następujący kod -

require ({
   //You can configure loading modules from the lib directory
   baseUrl: 'lib',
   
   paths: {
      //mapping of package
      dojo: 'http://sfoster.dojotoolkit.org/dojobox/1.7-branch/dojo'
   }
   
}, [
      //modules which we are using here
      'dojo/dom'
   ], function(dom) { 
   
      //using the 'byId' method from dom module
      var mydojo = dom.byId('dojo_val')
      mydojo.innerHTML = "The text is displaying via dojo/dom";   
   }
);

Wynik

Otwórz plik HTML w przeglądarce; otrzymasz następujący wynik -

Format modułu jest określony przez CommonJS. Jest definiowany bez zapewnienia równych opcji przeglądarek w innych środowiskach JavaScript. Dlatego specyfikacja CommonJS zaleca formaty transportowe i asynchroniczne wymagania . Możesz łatwo przekonwertować tradycyjny format modułu CommonJS do pracy z RequireJS. Jednak wszystkie moduły nie zostaną przekonwertowane do nowego formatu. Niektóre z wyjątków są wymienione poniżej -

Moduły z kodem warunkowym do wywołania żądania.
Moduły z zależnościami cyklicznymi.

Ręczna konwersja

Moduły CommonJS można konwertować ręcznie do formatu RequireJS przy użyciu następującej składni -

define(function(require, exports, module) {
   //place CommonJS module content here
});

Narzędzie do konwersji

Moduły CommonJS można konwertować do formatu RequireJS za pomocą narzędzia do konwersji projektów r.js , które jest wbudowane w plik r.js. Powinieneś określić ścieżkę pliku do konwersji i folder wyjściowy, jak pokazano poniżej -

node r.js -convert path/to/commonjs/modules/ path/to/output

Ustawianie eksportowanej wartości

Niektóre systemy w CommonJS pozwalają na ustawienie eksportowanej wartości poprzez przypisanie eksportowanej wartości jako module.exports Ale RequireJS obsługuje łatwiejszy sposób zwracania wartości z funkcji przekazanej do zdefiniowania. Zaletą tego jest to, że nie potrzebujesz eksportów i argumentów funkcji modułu, więc możesz pozostawić je poza definicją modułu, jak pokazano poniżej -

define(function (require) {
   var name = require('name');

   //Define the module as exporting a function
   return function () {
      name.doSomething();
   };
});

Alternatywna składnia

Alternatywnym sposobem określenia zależności jest użycie argumentu tablicy zależności define () . Ale kolejność nazw w tablicy zależności powinna być zgodna z kolejnością argumentów przekazanych do funkcji definicji define (), jak pokazano poniżej -

define(['name'], function (name) {
   
   return function () {
      name.doSomething();
   };
});

Ładowanie modułów z pakietów CommonJS

Aby dowiedzieć się o lokalizacji i modułach atrybutów pakietów, są ładowane w pakietach CommonJS przy użyciu RequireJS przez skonfigurowanie konfiguracji RequireJS.

Narzędzie optymalizacji

Narzędzie optymalizacji jest obecne w RequireJS, które może łączyć definicje modułów razem w zoptymalizowane pakiety do dostarczania do przeglądarki. Działa jako narzędzie wiersza polecenia, dzięki czemu można go używać jako części wdrażania kodu.

RequireJS zawiera mały zestaw wtyczek, które umożliwiają ładowanie różnych typów zasobów jako zależności. Poniżej znajduje się lista dostępnych wtyczek w RequireJS -

text
domReady
i18n
Ładowanie CSS

tekst

Tekst Wtyczka służy do ładowania tekstowych opartych zasobów asynchronicznie który jest wykorzystywany głównie do wstawiania zawartości HTML w plikach JavaScript. Można go załadować, gdy używasz tekstu! Prefiks w dowolnym wywołaniu modułu lub wymagaj lub zdefiniuj i przekaż rozszerzenie pliku do wtyczki. W porównaniu z normalnym ładowaniem modułów, wtyczka tekstowa ładuje moduły za pomocą XHR i nie dodaje kodu do nagłówka jako plikuscript etykietka.

Zasób pliku tekstowego można uwzględnić jako zależność w kodzie jako -

require(["mymodule", "text!mymodule.html", "text!mymodule.css"],
   
   function(mymodule, html, css) {
      //the html and css variables will be the text
      //of the mymodule.html file and mymodule.css files respectively
   }
);

domReady

RequireJS może służyć do ładowania skryptów, zanim DOM będzie gotowy, a programiści mogą wchodzić w interakcje z DOM tylko wtedy, gdy skrypty ładują się całkowicie. Czasami skrypty mogą być ładowane, zanim DOM będzie gotowy. Aby rozwiązać ten problem, RequireJS udostępnia nowoczesne podejście zwane zdarzeniem DOMContentLoaded , które wywołuje funkcję domReady, gdy DOM jest gotowy.

require(['domReady'], function(domReady) {
   
   domReady(function() {
      //the domReady function is called when DOM is ready 
      //which is safe to manipulate DOM nodes in this function
   });
});

i18n

Może być używany z wieloma lokalizacjami, które zapewniają i18nobsługa pakietów, które zostaną załadowane automatycznie, gdy moduł lub zależność określa "i18n!" prefiks. Aby z tego skorzystać, pobierz go i umieść w tym samym katalogu, w którym znajduje się twój główny plik JavaScript. Umieść tę wtyczkę w katalogu o nazwie „nls”, aby zlokalizować pliki lokalizacyjne.

Na przykład załóżmy, że mamy jeden plik js o nazwie country.js z następującą zawartością i umieścimy go w katalogu jako mój katalog / nls / country.js -

define({
   
   "root": {
      "india": "india",
      "australia": "australia",
      "england": "england"
   }
});

Możesz dodać określone tłumaczenie do pliku za pomocą ustawień regionalnych fr-fr, a powyższy kod zmieni się jako -

define({
   
   "root": {
      "title": "title",
      "header": "header",
      "description": "description"
   },
   
   "es-es": true
});

Następnie określ plik w katalogu mydirectory / nls / es-es / country.js o następującej treści -

define({
   
   "root": {
      "title": "título",
      "header": "cabecera",
      "description": "descripción"
   },
   
   "es-es": true
});

Możesz ustawić locale, przekazując je do wtyczki za pomocą konfiguracji modułu w pliku main.js , jak pokazano poniżej -

requirejs.config({
   
   config: {
      //set the config for the i18n plugin
      
      i18n: {
         locale: 'es-es'
      }
      
   }
});

Ładowanie CSS za pomocą RequireJS

Możesz użyć niektórych wtyczek do załadowania pliku CSS, po prostu dołączając do łącza nagłówka, aby załadować plik CSS.

CSS można załadować za pomocą własnej funkcji, jak pokazano poniżej -

function myCss(url) {
   var mylink = document.createElement("mylink");
   mylink.type = "text/css";
   mylink.rel = "stylesheet";
   mylink.href = url;
   document.getElementsByTagName("head")[0].appendChild(mylink);
}