requirejsrequirejs 시작하기
비고
RequireJS는 자바 스크립트 파일을 비동기 적으로 (즉, 차단하지 않고)로드하고 여러 자바 스크립트 파일 간의 종속성을 관리하는 데 사용되는 비동기 모듈 (AMD) API 의 구현입니다. 또한 개발자가 논리적으로 분리 된 코드를 유지하면서 배포 할 수 있도록 스크립트 파일을 결합하고 최소화하는 최적화 도구가 포함되어 있습니다.
안녕하세요 세계
다음 예는 RequireJS의 기본 설치 및 설정을 보여줍니다.
index.html 이라는 새 HTML 파일을 만들고 다음 내용을 붙여 넣습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello RequireJS</title>
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
<!-- place content here --->
<script>
requirejs(["scripts/say"], function(say) {
alert(say.hello());
});
</script>
</body>
scripts/say.js 에서 새 JS 파일을 만들고 다음 내용을 붙여 넣습니다.
define([], function(){
return {
hello: function(){
return "Hello World";
}
};
});
프로젝트 구조는 다음과 같아야합니다.
- project
- index.html
- scripts
- say.js
브라우저에서 index.html 파일을 열면 'Hello World'로 알려줍니다.
설명
require.js 스크립트 파일을로드하십시오.
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>scripts모듈에서 비동기 적으로say모듈을로드하십시오. (모듈을 참조 할 때.js확장자가 필요 없다는 것에주의하십시오.) 반환 된 모듈은hello()가 호출되는 제공된 함수로 전달됩니다.<script> requirejs(["scripts/say"], function(say) { alert(say.hello()); }); </script>say모듈은 하나 개의 기능으로 하나의 객체 반환hello정의합니다.define([], function(){ return { hello: function(){ return "Hello World"; } }; });
중첩 된 종속성이있는 Hello World
다음 예제는 define() 함수를 사용하여 여러 종속성을 보여줌으로써 Hello World 를 확장합니다.
index.html 이라는 새 HTML 파일을 만들고 다음 내용을 붙여 넣습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello RequireJS</title>
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
<!-- place content here --->
<script>
requirejs(["scripts/say"], function(say) {
console.log(say.hello("english"));
console.log(say.hello("spanish"));
console.log(say.hello("french"));
});
</script>
</body>
scripts/say.js 에서 새 JS 파일을 만들고 다음 내용을 붙여 넣습니다.
define(["scripts/translations"], function(translations){
return {
hello: function(language){
return translations[language].hello + " " + translations[language].world;
}
};
});
scripts/translations.js 에서 새 JS 파일을 만들고 다음 내용을 붙여 넣습니다.
define([], function(){
return {
"english": {
hello: "Hello",
world: "World"
},
"spanish": {
hello: "Hola",
world: "Mundo"
},
"french": {
hello: "Bonjour",
world: "Le Monde"
}
};
});
프로젝트 구조는 다음과 같아야합니다.
- project
- index.html
- scripts
- say.js
- translations.js
브라우저에서 index.html 파일을 열면 콘솔에서 다음과 같이 출력됩니다.
Hello World
Hola Mundo
Bonjour Le Monde
설명
require.js 스크립트 파일을로드하십시오.
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>scripts모듈에서 비동기 적으로say모듈을로드하십시오. (모듈을 참조 할 때.js확장자가 필요 없다는 것에주의하십시오.) 반환 된 모듈은hello()가 호출되는 제공된 함수로 전달됩니다.<script> requirejs(["scripts/say"], function(say) { console.log(say.hello("english")); console.log(say.hello("spanish")); console.log(say.hello("french")); }); </script>say모듈은hello정의 된 하나의 함수를 가진 단일 객체를 반환하지만, 여기서는 종속성 (scripts/translations)을 정의하고 거기에서 변환을 가져올 것입니다.define(["scripts/translations"], function(translations){ return { hello: function(language){ return translations[language].hello + " " + translations[language].world; } }; });translations모듈은 단순히 다양한 단어 번역이있는 객체를 반환합니다.define([], function(){ return { "english": { hello: "Hello", world: "World" }, "spanish": { hello: "Hola", world: "Mundo" }, "french": { hello: "Bonjour", world: "Le Monde" } }; });
비 AMD 라이브러리 통합
모든 라이브러리가 AMD 및 RequireJS의 define() 함수와 호환되는 방식으로 정의되지는 않습니다. 저자는 이러한 종속성을 구성하기위한 shim 지시문을 포함 shim 문제를 해결했습니다.
한 가지 예는 jQuery UI 레이아웃 플러그인을 사용하는 것입니다. 그 플러그인은 jQuery에 의존한다. 다음과 같이 설정할 수 있습니다 :
requirejs.config({
paths: {
'jquery': '../path/to/jquery.min',
'jquery.layout': '../path/to/jquery.layout.min'
},
shim: {
'jquery.layout': {
deps: ['jquery']
}
}
});
그리고 다음과 같은 레이아웃 모듈에서 사용하십시오 :
define(['jquery', 'jquery.layout'], function ($, layout) {
$('body').layout();
});
데이터 사용 - 기본 Entry Point
<script> 태그에있는 data-main 을 사용하여 RequireJS로 애플리케이션에 대한 단일 진입 점이 가능합니다.
<script type="text/javascript" data-main="scripts/main" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
로드 할 때 RequireJS는 data-main 속성을 찾고 async 속성이 설정된 DOM에 주 스크립트 태그를 삽입합니다. 이 파일은 응용 프로그램을 시작하기 전에 구성을 원할 것입니다.
예 :
// contents of scripts/main.js
require.config({
waitSeconds: 10,
paths: {
jquery: 'libs/jquery-1.4.2.min'
}
});
requirejs(["jquery", "libs/say"], function($, say) {
var $body = $('body');
$body.append( $('<p/>').text(say.hello("english")) );
$body.append( $('<p/>').text(say.hello("spanish")) );
$body.append( $('<p/>').text(say.hello("french")) );
});
