메모장



FRONT(css,js) 관리를 위한 JSPM사용 방법 javascript



jspm은 module loader인 SystemJS를 기반으로 모듈을 불러온다. Traceur이나 Babel도 쉽게 적용할 수 있어 ES6 기준으로 개발하는데 편리하다.

 

JSPM설치 방법

1. Install jspm CLI:

    npm install jspm -g

2. Create a project:

    cd my-project    npm install jspm --save-dev

새로운 프로젝트 설정:

  jspm initPackage.json file does not exist, create it? [yes]: (Package.json파일이 존재하지 않는다면 새로 생성할 것인지 여부)  Would you like jspm to prefix the jspm package.json properties under jspm? [yes]: (Jspm에 있는 jspm package.json 파일을 수정할것인지 여부)  Enter server baseURL (public folder path) [.]:  (server 경로 설정)  Enter jspm packages folder [./jspm_packages]: (jspm package folder 경로)  Enter config file path [./config.js]: (jspm config.js파일 경로)  Configuration file config.js doesn't exist, create it? [yes]: (config.js파일이 존재하지 않는다면 생성할 것인지?)  Enter client baseURL (public folder URL) [/]:  (클라이언트 경로)  Which ES6 transpiler would you like to use, Traceur or Babel? [traceur]: (ES6변환을 위해서 Treceur혹은 Babel을 사용할 것인지 여부)

***config.js 파일 용도 : 위의 내용 포함, jspm_package경로, front package경로, bundle.js에 합쳐질 package경로를 포함하고 있음

3. jspm Registry, GitHub or npm을 통한 패키지 설치:

    jspm install npm:lodash-node    jspm install jquery2.2.0=npm:jquery@2.2.0
jspm install jquery1.12.0=npm:jquery@1.12.0 jspm install myname=npm:underscore

(명령어) (옵션) (별칭=설치저장소:패키지명)

위와 같이 설치 가능하다.

설치할 패키지 검색 URL : http://kasperlewau.github.io/registry 

그리고 별명은 같은 패키지의 여러 버전을 관리할때 유용하다.

그 내용은 추후에 예제로 학습이 가능하다.

4. Write application code

lib폴더에 의존성을 거친 파일 코드를 작성한다.어떠한 모듈 포맷도 괜찮다.(ES6 포함)

 

lib/bootstrap.js

    import _ from 'lodash-node/modern/lang/isEqual.js';    import $ from 'jquery';    export function bootstrap() {      // bootstrap code here    }

lib/main.js

    import {bootstrap} from './bootstrap.js';    bootstrap();

5. Run the code

<!doctype html> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script>
 System.import('build.js').then(function() {
console.log('build loaded!');
});
 System.import('jquery2.2.0').then(function(j) {
console.log('jquery2.2.0 loaded!');
console.log(j.fn.jquery);
});

 System.import('jquery1.12.0').then(function(j) {
console.log('jquery1.12.0 loaded!');
console.log(j.fn.jquery);
});

//multi import 사용 방법
Promise.all([
System.import('jQuery1.12.0'),
System.import('jQuery2.2.0')
]).then(function(modules) {
console.log('loaded!');
console.log(modules[0].fn.jquery);
console.log(modules[1].fn.jquery);
}); 
</script></html>

위와 같이 3번에서의 별칭을 사용하여 import를 사용하면 jquery버전별 관리가 가능하다.(패키지 버전별 관리가 가능하다는 얘기)

** 마지막  import multi parameter 방법은 promise를 사용하여 구현한다. (http://webframeworks.kr/tutorials/angularjs/angularjs_promise_deferred/)

6. Bundle for production

  jspm bundle lib/main --inject

위 명령어 실행 후 build.js, build.map.js파일 생성 후 웹서버를 통하여 실행하면 된다.

 

참고 URL :

http://haruair.com/blog/2929 
https://github.com/jspm/jspm-cli/blob/master/docs/getting-started.md
http://kasperlewau.github.io/registry
http://webframeworks.kr/tutorials/angularjs/angularjs_promise_deferred/

 


덧글

  • leeseungje 2016/02/17 16:49 # 삭제 답글

    열심히 잘 보고 있습니다. 형님의 그 꿈 제가 꼭 도와 드리겠습니다.!!!
  • seye2 2016/02/17 16:50 # 답글

    니가 아무리 도와줘도 안될거 같아 너론 역부족이야
댓글 입력 영역