jspm은 module loader인 SystemJS를 기반으로 모듈을 불러온다. Traceur이나 Babel도 쉽게 적용할 수 있어 ES6 기준으로 개발하는데 편리하다.
JSPM설치 방법
1. Install jspm CLI:
npm install jspm -g2. 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/
최근 덧글