Package.js를 사용하여 개발된 프로젝트의 디렉터리 구조를 직접 살펴보겠습니다. 간단하고 명확합니다.
CommonJS의 AMD 사양과 달리 Package.js의 구문에서는 JS 모듈이 다른 모듈에만 의존할 수 없습니다. JS 패키지는 CSS 및 HTML 템플릿 파일과 기타 JSON 데이터 파일에 의존하며 런타임 시 다른 종속 파일의 콘텐츠를 가져옵니다. 정의 구문은 다음과 같습니다.
가져오기 프로세스 중에 Package.js가 자동으로 수행합니다. 당신을 위한 물류 작업: 1, 이 모듈의 종속 모듈을 로드합니다. 2. 종속 HTML 및 CSS 파일을 로드합니다.
var btn=new Button();
btn.renderTo(document.body);
});
개발 중에는 모듈화를 위해 JS를 작은 모듈 파일로 나누어야 하지만, 프로덕션 환경에 게시할 때는 로딩 속도를 위해 이러한 JS 파일을 단일 JS 파일로 병합하고 마찬가지로 압축해야 합니다. , CSS 파일을 함께 병합해야 합니다.
//패키징 구성 파일
// build-config.json 파일 콘텐츠
{
"staticUrls": {"defaults":"http://statics.iwt.macrotarget.com/jslibs/"},
"nsconfs": [" http://www.cnblogs.com/statics/jslibs/XLib/_nsconf_.js"],
"includes":["XLib.apps.MainApp","XLib.ui.*"],
"compress":true //압축을 위해 UglifyJS 및 UglifyCSS 사용
}
Package.js의 도움으로 이 기능을 완료하려면 3~4줄만 작성하면 됩니다. JSON 구성 코드를 작성하고 명령을 실행하면 Everything is OK입니다.
#Execute command
build.js build-config .json js all.min.js
build.js build-config.json css all.min.css
#허리가 더 이상 아프지 않고 다리도 더 이상 아프지 않아요!
인용문
PS: build.js도 약간의 작업을 수행합니다. CSS 파일의 background:url()과 같은 상대 경로를 절대 URL로 변환합니다. 개발할 때 CSS의 url()은 항상 상대 경로만 작성하면 됩니다. 프로덕션 환경에 배포하면 build.js에 의해 병합된 CSS가 자동으로 이를 절대 URL로 변환합니다. IE6 Png AlphaImageLoader 필터와 wui4ie6 로더를 사용하더라도 개발 중에 src=에 상대 경로를 작성할 수 있습니다. 개발 모드에서 Package.js는 절대 URL을 사용하여 CSS 규칙도 자동으로 생성합니다. 패키징할 때 CSS에 절대 URL을 작성할 필요가 없습니다.
다른 모듈 로더 및 AMD 구현(RequireJS, SeaJS...)과 비교하여 Package.js의 장점이나 단점은 무엇입니까?
Package.js는 Web App Framework용으로 개발되었습니다. 정의 구문과 파일 디렉터리 구조는 엄격합니다(또는 약간 복잡함). 이는 AMD 사양
Package.js에서 가장 간단한 정의 구문만 사용합니다. CSS 및 HTML 파일에 대한 모듈의 의존성은 작성을 정의하는 방식에서 다른 JS 모듈에 대한 의존성과 구별되며, CSS, HTML, JSON 패키징 처리도 build.js에 포함됩니다
(TOT)에는 특별한 주의가 포함됩니다. IE6 CSS용(절대 우리 프로젝트에 필요합니다)
PackageMeta를 추가하면 JS 모듈은 런타임에 자체 URL을 알 수 있습니다
... 단점인 경우: CommonJS AMD 사양과 완전히 일치하지 않음 호환 가능
빌드는 세 가지 내보내기 모드(includes, deps, all)를 지원합니다.
개발 모드에서 더 편리합니다. 도메인 간 로딩을 위해 _xproxy_.html을 사용하고 프록시가 필요하지 않습니다. _nsconf_.js를 사용하면 경로를 구성할 필요가 없습니다.
간단한 소개를 듣고 나면 Package.js를 사용해 보고 싶은 마음이 생길 것입니다. 사용하기 전에 Package의 세부 사항을 참고하세요. .js 문서:http://package-js.googlecode.com/hg/docs/Package.html. 알았어! JavaScript 앱 개발에 역방향 방법 사용을 중단하고 Out Man이 되는 것을 중단하고 가능한 한 빨리 Package.js를 사용하십시오 ^O^