[js]Backbonejs - r.js build 환경 설정

2014. 5. 14. 01:23

Backbonejs - build 환경 설정

Module 별 분리하여 빌드하기
- 공통 js. 파일 분리 : 페이지 별로 작업을 할 경우 공통 lib 또는 환경 설정을 분리하여 중복사용 방지
예)Backbonejs, jquery, json...

샘플 소스 : https://github.com/royleej9/Backbonejs_Template
로그인 화면 과 버튼을 클릭하여 로그인 창을 띄우는 모듈로 구성

참고 사이트

Backbonejs : http://backbonejs.org/
jQuery : http://jquery.com/
underscorejs : http://underscorejs.org/
testjs : https://github.com/requirejs/text
json2 : https://github.com/douglascrockford/JSON-js/blob/master/json2.js
boootstrap : http://getbootstrap.com/
buildjs 관련 : http://tech.pro/blog/1639/using-rjs-to-optimize-your-requirejs-project

폴더 구조

├── css
│   └── bootstrap.css
│
├── dist	//  빌드 결과 파일들   
│
├── js
│   └── app
│   │	├── build
│   │	│   ├── build.js  // 빌드 실행 파일
│   │	│   └── r.js  	  // 빌드 플러그인
│   │   │
│   │	├── com		// 작업 파일들
│   │	│   ├── custom
│   │	│   │   └── BackboneView.js 
│   │	│   │
│   │	│   ├── user
│   │	│   │   ├── login.js
│   │	│   │   ├── loginTpl.htm
│   │	│   │   ├── loginModal.js
│   │	│   │   └── loginModalTpl.htm
│   │	│   │
│   │	│   └── util
│   │	│       └── validationUser.js
│   │   │
│   │	├── css
│   │   │   └── login.css
│   │   │
│   │	├── images
│   │   │    └── loader.gif
│   │   │
│   │	├── commonlibs.js 		// 공통 lib 
│   │	├── config.js 	  		// 관련 환경 설정파일
│   │	├── loginModalView.js  	// 모달 로그인
│   │	└── loginView.js        // 로그인
│   │ 
│   └── libs
│	├── backbone.js
│	├── jquery-1.10.2.js
│	├── json2.js
│	├── underscore.js
│	├── require.js
│	├── text.js	// 템플릿 플러그인
│	├── jquery.ajax.util.js // json post 관련 lib
│	└── bootstrap.js	// Bootstrap 관련 플러그인
│
└── index.html

config.js
requirejs 환경 설정 파일

require.config({
		
		// 경로 설정
        paths: {
        	json2	   : '../libs/json2',
            jquery     : '../libs/jquery-1.10.2',
            text       : '../libs/text', 		// text 2.0.10
            underscore : '../libs/underscore',	//Underscore.js 1.5.2
            backbone   : '../libs/backbone',	// Backbone.js 1.1.0
            ajaxUtil   : '../libs/jquery.ajax.util',
            bootstrap  : '../libs/bootstrap'
            	
        },

        // 의존 파일 설정
        shim : {
        	backbone : {
        		deps : ['jquery', 'underscore'],
                exports : 'Backbone'
            },
            underscore : {
            	exports : '_'
            },
        	ajaxUtil: {
        		deps: ["json2"],
        		exports: 'AjaxUtil'
        	},
        	bootstrap: {
        		deps: ['jquery'],
        		exports: 'Bootstrap'
        	}
        }
});

commonLibs.js
build 실행 후 정의된 json, jquery 등의 lib 파일을 commonLibs.js 파일로 통합함

define('commonLibs',[
        'json2',
        'jquery',
        'text',
        'underscore',
        'backbone',
        'ajaxUtil', 'bootstrap'
], function() { });

loginView.js
ID 값이 loginView 인 태그에 로그인 화면을 추가

loginView.js
- 단순 화면상에 로그인 화면을 추가

require( ['config', 'commonLibs'], function () {
	require( [ 'com/user/login'], function ( Login ) {

		var _loginView = new Login();
		$("#loginView").append(_loginView.el);

	} );
} );

loginModalView.js
ID 값이 loginModalView 인 태그에 로그인 화면 모달 창을 호출하는 버튼을 추가

loginModalView.js
- 로그인 버튼을 클릭시 로그인 창 호출

require( ['config', 'commonLibs'], function () {
	require( [ 'com/user/loginModal'], function ( LoginModal ) {		
		var _loginView = new LoginModal();
		$("#loginModalView").append(_loginView.el);
	} );
} );

index.html
사용하고자 하는 모듈을 아래 처럼 html 페이지에 선언에서 사용

<script src="js/libs/require.js" data-main="js/app/loginView"></script>

같은 html 페이지에서 loginView 와 loginModalView 모듈을 동시에 사용하고 할때

<script src="js/libs/require.js"></script>
<script type="text/javascript">
	// loginView 와 loginModalView를 페이지 하나에서 동시에 사용할때 
  	require({baseUrl: './js/app'},['loginView', 'loginModalView']);  		
</script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Backbonejs Template</title>

	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!-- 	<link rel="stylesheet" type="text/css" href="js/app/css/login.css"> -->	
	<link rel="stylesheet" type="text/css" href="dist/js/app/css/login.css">
</head>
<body>


<!-- 	<script src="js/libs/require.js" data-main="js/app/loginView"></script>	 -->
<!-- 	<script src="js/libs/require.js" data-main="js/app/loginModalView"></script> -->

	<script src="js/libs/require.js"></script>
	<script type="text/javascript">
		// loginView 와 loginModalView를 페이지 하나에서 동시에 사용할때 
  		require({baseUrl: './js/app'},['loginView', 'loginModalView']);  		
	</script>


<!-- 	<script src="js/libs/require.js" data-main="dist/js/app/loginView"></script> -->
<!-- 	<script src="js/libs/require.js" data-main="dist/js/app/loginModalView"></script> -->
<!-- 	<script src="js/libs/require.js"></script> -->
	<script type="text/javascript">
	// loginView 와 loginModalView를 페이지 하나에서 동시에 사용할때 
        // require({baseUrl: './dist/js/app'},['loginView', 'loginModalView']);
	</script>

<div id="loginView" ></div>
<div id="loginModalView" ></div>
 	
</body>
</html>

build.js

관련 예제 : https://github.com/jrburke/r.js/blob/master/build/example.build.js

({ // node r.js -o build.js mainConfigFile: '../config.js', // 설정 파일 removeCombined: true, // 모듈화 된 파일과 관련된 js 파일 삭제 findNestedDependencies: true, inlineText: true, // html 포함 dir: '../../../dist/js/app', // 빌드 결과 폴더 fileExclusionRegExp: /build/, // 빌드 결과에서 제외 optimizeCss: "standard", // css 최적화 optimize: "none", // 압축 여부 preserveLicenseComments: true, // 라이센스 주석 삭제 않기 modules: [ { name: "commonLibs" // 사용자가 작성한 js파일을 제외한 파일들을 한 파일로 생성 예) jquery, backbone 등... }, { name: "config" // requirejs 환경 설정 파일 }, { name: "loginView", exclude: [ 'commonLibs', 'config' ] }, { name: "loginModalView", exclude: [ 'commonLibs', 'config' ] } ] })

빌드 방법
1. node.js 설치
2. require.js 설치 - npm install -g requirejs
3. nodejs 도스창 실행
4. /Backbonejs_Template/WebContent/js/build 폴더로 이동
5. node r.js -o build.js 실행

빌드 결과 폴더 구조

├── dist	//  빌드 결과 파일들   
	└── js
	    └── app
	     	├── com		// 작업 파일들
	     	│   └── user
	   	│       ├── loginTpl.htm     //  inlineText: true 사용시 필요 없음
	        │       └── loginModalTpl.htm   //  js 파일에 포함이 됨
	        │   
		├── css
	        │   └── login.css
	        │
	     	├── images
	        │    └── loader.gif
	        │
	    	├── build.txt 			// build 내역
	    	├── commonlibs.js 		// 공통 lib 
	    	├── config.js 	  		// 관련 환경 설정파일
	    	├── loginModalView.js  	// 모달 로그인
	    	└── loginView.js        // 로그인

'JS' 카테고리의 다른 글

Sinon.JS (0)	2019.08.26
Mocha-Sinon 개발 환경 (0)	2019.08.20
[Vuejs] mocha+chai+sinon 테스트 (0)	2019.08.13
Static server (0)	2019.08.05
문장 구분하기 (0)	2013.11.06

정리 중...