요구 사항이있는 라이브러리 구축

키 포인트

requirejs는 스크립트 및 CSS 파일을 비동기로로드하고 종속성을 관리하며 코드 구조를 빌드하는 브라우저 용 AMD 모듈 로더입니다. 또한 생산 환경을위한 최적화 도구도 포함되어 있습니다. requirejs를 사용할 때 코드는 모듈 정의에 래핑해야합니다. 모듈은 다른 모듈에서 참조 할 수 있으며 모듈 자체가로드되기 전에 모든 종속성이로드됩니다.

모든 모듈을 단일 파일로 빌드하도록 요구 사항 r.js를 구성 할 수 있습니다. 이 구성은 모듈을 AMD 모듈 및 브라우저의 글로벌 내보내기로 독립적 인 글로벌 라이브러리로 만들 수도 있습니다.

요구 사항은 라이브러리를 사용하는 라이브러리 및 응용 프로그램을 구축하는 데 사용될 수 있습니다. 이 프로세스에는 AMD 모듈 정의 및 사용, R.JS Optimizer 구성 및 브라우저에서 요구 사항을 구성하여 잘 구조화되고 구성된 코드를 생성하는 것이 포함됩니다.
requirejs는 스크립트와 CSS 파일을 비동기로로드 할 수있는 브라우저 용 AMD 모듈 로더입니다. 더 이상 단일 파일 (index.html)에서 스크립트 파일 순서를 처리 할 필요가 없습니다. 대신, 모듈 정의로 코드를 랩핑하면 요구 사항이 종속성 관리에 책임이있어 코드 구조가 더 명확하고 구성됩니다. 또한 생산 환경을위한 파일을 압축하고 연결하는 최적화 도구가 있습니다.
• 공식 웹 사이트는 API에 대한 자세한 문서를 제공하며 도움이되는 샘플 코드 기반이 많이 있습니다. 그러나 많은 구성이 있으며 처음에는 요구 사항을 사용하는 것이 까다로울 것입니다.
이 기사에서는 AMD 모듈이있는 라이브러리를 구축하고 최적화하고 요구 사항을 사용하여 독립형 모듈로 내보내면서 요구 사항을 사용하는 방법을 배웁니다. 나중에 요구 사항을 사용하여 응용 프로그램을 구축하고 라이브러리를 사용합니다.
• 이 튜토리얼은 요구 사항에 대한 특정 이해가 있다고 가정합니다. Get-Start Guide를 찾고 있다면 : 효율적인 JavaScript 모듈로드를 위해 requirejs를 이해하십시오.
설치 요구 사항
• requirejs는 bower를 통해 설치할 수 있습니다
또는 github에서 파일을 가져올 수 있습니다.

요구 사항 프로젝트를위한 Grunt 기반 Yeoman 생성기도 있습니다.

AMD 모듈을 정의하십시오 우리는 코드를

로 랩핑하여 AMD 모듈로 만듭니다.

파일 : mylib.js

<.> 그게 다야. 는이 경우 의 선택적 첫 번째 매개 변수 인 종속성 배열을 허용합니다. 이 모듈의 종속성 목록입니다. 배열의 모든 모듈은이 모듈 전에로드됩니다. 이 모듈을 실행할 때 매개 변수는 종속성 배열의 해당 모듈입니다.

이 경우 jQuery가 먼저로드 된 다음 매개 변수로 함수로 전달 된 다음 모듈에서 안전하게 사용할 수 있습니다. 마지막으로, 우리 모듈은 문자열을 반환합니다. 반환 값은이 모듈이 필요할 때 함수 매개 변수로 전달되는 것입니다.

다른 모듈을 인용하십시오 두 번째 모듈을 정의하고 첫 번째 모듈 MyLib.js를 참조하여 어떻게 작동하는지 살펴 보겠습니다.

<..> 파일 : main.js

종속성 배열의 모든 종속성을 참조 할 수 있으며 모든 모듈은 동일한 순서로 함수 매개 변수별로 제공됩니다. 이 두 번째 모듈에서는 jquery 및 mylib 모듈을 참조하고 간단히 객체를 반환하면 특정 변수를 노출시킵니다. 이 라이브러리 사용자는이 개체를 라이브러리로 사용합니다.

requireJS Optimizer : r.js

구성 당신은 궁금 할 것입니다. 요구 사항은 종속성 배열의 문자열을 보면서 어떤 파일을로드 해야하는지 어떻게 알 수 있습니까? 이 예에서는 문자열로 jQuery와 mylib을 제공하며, 요구 사항은 이러한 모듈이 어디에 있는지 알고 있습니다. mylib은 매우 간단합니다. mylib.js, .js를 생략합니다.

jQuery는 어디에 있습니까? 이것이 JS 구성 요구 사항입니다. 요구 사항 구성을 통해 광범위한 구성을 제공 할 수 있습니다. 요구 사항을 제공하는 두 가지 방법이 있습니다. 우리는 requireJS Optimizer를 사용하고 있으며 R.JS 메소드를 보여 드리겠습니다. r.js는 requirejs optimizer입니다.

bower install requirejs --save

우리는 R.JS에 모든 모듈을 단일 파일로 최적화하는 구성을 제공합니다. 우리가 제공하는 구성은 R.JS가 AMD 모듈과 브라우저의 글로벌 내보내기로 독립적 인 글로벌 라이브러리로 모듈을 구축 할 수 있도록합니다.

R.JS는 명령 줄 또는 노드 모듈을 통해 실행할 수 있습니다. Optimizer Grunt-RequireJS를 실행하기위한 Grunt 작업도 있습니다.

그 말에 따라, 우리 구성의 모습을 보자. 파일 : 도구/build.js <🎜

구성 파일은 실제로 요구 사항의 핵심입니다. 이러한 매개 변수의 작동 방식을 이해하면 전문가처럼 요구 사항을 사용할 수 있습니다. 구성 파일을 사용하여 다른 작업을 수행하고 프로젝트 빌드를 조정할 수 있습니다. 구성 및 요구 사항에 대해 자세히 알아 보려면 문서와 위키를 참조하는 것이 좋습니다. 빌드 시스템 사용 방법을 보여주는 샘플 구성 파일도 있으므로 참조하십시오.

마지막으로, 우리는 실제로 Optimizer를 실행했습니다. 앞에서 말했듯이 명령 줄이나 노드 및 grunt 작업을 통해 실행할 수 있습니다. 다른 환경에서 Optimizer를 실행하는 방법은 R.JS ReadMe 파일을 참조하십시오.

이것은 dist/mylib.js

에서 빌드 파일을 생성합니다 <🎜 🎜> <<> build.js

<🎜 🎜> <'s> 다음,이 매개 변수가 실제로 무엇을 의미하는지 봅시다.

<–> baseurl - 모든 모듈이 찾을 수있는 루트 경로입니다.

경로 - BaseUrl의 모듈 이름에 대한 경로 맵.

<,>이 예에서 "mylib"는 "../main"에 맵핑되며, 이는 Baseurl과 관련이 있으므로 "mylib"을 참조하면 파일을로드합니다. "../lib/../mylib/main. JS”. BaseUrl을 추가 한 다음 경로 설정을 추가 한 다음 모듈 이름과 .js 접미사가 이어집니다. 그곳에서 모듈이 jQuery 및 MyLib와 같은 파일에 매핑되는 방법을 지정할 수 있습니다.

포함 - 최적화 프로세스에 포함하려는 모듈. 포함 된 모듈에 필요한 종속성이 암시 적으로 포함됩니다. 이 예에서 기본 모듈은 MyLib 및 JQuery에 따라 포함되므로 포함 할 수 있으므로 명시 적으로 포함 할 필요가 없습니다. 우리는 또한 나중에 언급 될 아몬드도 포함합니다.

제외 - 최적화 프로세스에서 제외하려는 모듈. 우리의 경우, 우리는 jQuery를 배제했습니다. 라이브러리를 구축하는 사용자는 jQuery 라이브러리를 제공합니다. 나중에 이것을 볼 것입니다.

out - 최적화 된 출력 파일의 이름입니다.

랩 - 랩으로 지정된 시작 및 종료 텍스트에서 빌드 패키지를 랩핑합니다. 최적화 된 출력 파일은 다음과 같습니다. wrap.start 랩핑 된 모듈을 포함하십시오. wrap.start 및 wrap.end는 출력에 내용이 포함 된 파일 이름입니다.

<🎜 🎜> <<> 아몬드 <🎜 🎜>

빌드 라이브러리에는 require.js 파일이 포함되어 있지 않지만 아몬드를 사용합니다. 아몬드는 요구 사항을 대체 할 작은 AMD API 구현입니다.

<🎜 🎜> <<> 우리의 라이브러리를 포장하십시오

R.JS 구성에서 wrap.start 및 wrap.end 파일을 사용하여 라이브러리를 랩핑합니다. 또한 라이브러리에 아몬드가 포함되어있어 라이브러리를 독립적으로 만들 것이므로 브라우저 글로벌 변수를 통해 또는 요구 사항을 통해 AMD 모듈로 사용할 수 있습니다.

파일 : wrap.start <🎜🎜> 메인, mylib 및 아몬드를 포함하는 모듈은 랩. start and wrap.end의 중간에 있습니다. 파일 : 랩. 엔드 <🎜 🎜>

사용자가 AMD 로더를 사용하는 경우 빌드 파일은 "jQuery"를 AMD 종속성으로 요청합니다. 소비자가 브라우저 글로벌 변수 만 사용하는 경우 라이브러리는 $ global 변수를 얻어 jQuery 종속성에 사용합니다.

<<> requirejs <🎜 🎜> <🎜 🎜>를 사용하여 라이브러리 사용 우리의 라이브러리가 완료되었으므로 이제 requirejs 응용 프로그램을 작성하여 실제로 사용합시다.

<..> 파일 : app.js <🎜 🎜> <,> 여기 특별한 것은 없습니다. jQuery와 MyLib을 참조하는 또 다른 모듈 일뿐입니다. 모듈이 로 정의되면 즉시 실행되지 않습니다. 즉, 콜백 함수 (종속성 배열 후 전달)는 즉시 실행되지 않습니다. 즉,이 모듈을 정의하여 응용 프로그램이 단순히 시작되지 않음을 의미합니다. 이제 요구 사항을 구성하고 실제로이 모듈 인 응용 프로그램을 실행하는 방법을 살펴 보겠습니다.

<🎜 🎜> <<> 브라우저에 대한 requirejs 구성 <🎜 🎜>

파일에서 requireJ를 구성하고 앱 모듈을 실행합니다. 그러나이 작업을 수행하는 방법에는 여러 가지가 있습니다.

<..> 파일 : common.js <🎜 🎜>

baseurl 및 경로 구성은 이전과 동일합니다. 여기서 추가 구성 값은 다음과 같습니다 shim :

를 사용하지 않는 전통적인 "브라우저 글로벌"스크립트의 종속성 및 내보내기를 선언하고 모듈 값을 설정합니다. 예를 들어, 백본은 AMD 모듈이 아니지만 수출에 지정된 글로벌 네임 스페이스로 백본을 내보내는 브라우저 글로벌 변수입니다. 이 예에서는 모듈이 jQuery 및 밑줄에 의존하므로 DEP를 사용하여 지정합니다. DEP 배열의 스크립트는 백본을로드하기 전에로드되며로드 후 내보내기 값이 모듈 값으로 사용됩니다. define() 이 애플리케이션 프로젝트에서 R.JS를 사용할 수도 있으며 별도의 구성이 필요합니다. 그러나 그것에 대해 혼란스럽지 마십시오. 나는 그것을 수행하는 방법에 대한 자세한 내용을 보지 못하지만 이것은 우리가 도서관에서 한 일과 비슷합니다. 자세한 내용은 샘플 빌드 구성을 참조하십시오.

<<>

<🎜 🎜>를 요구하고 정의하십시오 요구 사항을 사용하여 모듈을로드하고 즉시 실행합니다. 때로는 정의하고 요구하면 어떤 사용을 사용할 것인지 혼동 될 수 있습니다. 정의는 모듈을 정의하지만 실행하지는 않지만 모듈을 정의하고 실행해야합니다. 즉, 종속 모듈이 실행되기 전에로드 및 실행됩니다. 일반적으로 주 항목 모듈로 요구 사항이 필요하며 정의를 통해 정의 된 다른 모듈에 따라 다릅니다.

<🎜 🎜> <<>로드 스크립트 <🎜 🎜> 일반적으로 모든 스크립트 파일을 Index.html에 포함시킵니다. 이제 우리는 requirejs를 사용하므로 요구 사항을 포함시키고 응용 프로그램의 진입 지점 인 데이터 메인을 지정하면됩니다. 구성 옵션을 설정하거나 Index.html에 사용 된 기본 모듈을 분리하는 방법에는 여러 가지가 있습니다. 여기에서는 추가 정보를 찾을 수 있습니다.

<🎜 🎜> <<> 결론

<,>이 기사에서는 requirejs를 사용하여 라이브러리를 사용하는 라이브러리와 애플리케이션을 만들었습니다. R.JS Optimizer를 구성하는 방법과 브라우저에서 요구 사항을 구성하는 방법을 배웠습니다. 마지막으로 requireJS를 사용하여 AMD 모듈을 정의하고 사용하는 방법을 배웠습니다. 이것은 우리의 코드를 잘 구조화하고 구성하게 만듭니다.

이 튜토리얼의 전반부 (구성 Optimizer) 에서이 예제 Libglobal 저장소를 사용했는데 후반은 복잡하지 않으므로 지금 직접 할 수 있어야합니다. 공식 요구 사항 웹 사이트는 최종 문서이지만 Github의 샘플 저장소와 요구 사항에 대한 샘플 프로젝트를 확인하여 requiesjs 응용 프로그램의 사용을 보여줍니다. <🎜 🎜> <<> requirejs <🎜 🎜> <🎜 🎜>를 갖춘 라이브러리 구축에 대한 FAQ (FAQS)

<<> JavaScript 개발에서 요구 사항의 주요 목적은 무엇입니까?

<<> requirejs는 JavaScript 파일 및 모듈 로더입니다. 브라우저 사용에 최적화되어 있지만 다른 JavaScript 환경에서도 사용할 수 있습니다. 요구 사항의 주요 목적은 JavaScript에서 모듈 식 프로그래밍의 사용을 장려하는 것입니다. 개발자가 JavaScript 파일 간의 종속성을 관리하고 코드를 모듈화하는 데 도움이됩니다. 이로 인해 코드 구성, 유지 관리 및 재사성이 향상됩니다. 또한 코드의 속도와 품질을 향상시킵니다.

<🎜 🎜> <<> 요구 사항은 JavaScript 파일 종속성을 어떻게 처리합니까?

bower install requirejs --save

requirejs는 비동기 모듈 정의 (AMD) API를 사용하여 JavaScript 모듈을 처리합니다. 이 모듈은 비동기 적으로로드 될 수 있으므로로드시 다른 스크립트가 실행되는 것을 차단하지 않습니다. requirejs를 사용하여 모듈을 정의하면 종속성을 지정합니다. 그런 다음 요구 사항은 이러한 종속성이 모듈 자체 전에로드되도록합니다.

requirejs를 사용하여 모듈을 정의하는 방법은 무엇입니까?

requirejs에서 모듈을 정의하려면 함수를 사용할 수 있습니다. 이 함수는 종속성 배열과 공장 함수의 두 매개 변수를 취합니다. 종속성은 모듈에 의존하는 파일의 경로입니다. 공장 기능은 모듈 코드를 작성하는 곳입니다. 이 기능은 모든 종속성이로드되면 호출됩니다. 코드에서 requirejs로 정의 된 모듈을 사용하는 방법은 무엇입니까? requirejs로 정의 된 모듈을 사용하려면 함수를 사용할 수 있습니다. 이 함수는 종속성 배열과 콜백 함수의 두 매개 변수를 허용합니다. 종속성은 사용하려는 모듈의 경로입니다. 콜백 함수는 모듈을 사용하는 곳입니다. 이 기능은 모든 모듈이로드되면 호출됩니다.

jQuery와 같은 다른 JavaScript 라이브러리와 함께 요구 사항을 사용할 수 있습니까?

예, jQuery와 같은 다른 JavaScript 라이브러리와 함께 요구 사항을 사용할 수 있습니다. requirejs에는 define()를 사용하지 않는 전통적인 비 모드형 스크립트를로드하기위한 내장 기능이 있습니다. SHIM을 사용하면

를 사용하지 않는 스크립트의 종속성 및 내보내기를 지정하여 종속성을 선언하고 모듈 값을 설정할 수 있습니다.

requirejs로 내 코드를 최적화하는 방법은 무엇입니까? requirejs는 r.js라는 최적화 도구와 함께 제공됩니다. 이 도구는 JavaScript 파일과 종속성을 단일 파일로 결합하고 압축합니다. 이로 인해 HTTP 요청 수와 파일 크기가 줄어들어 웹 페이지의로드 시간을 크게 향상시킬 수 있습니다. requirejs에서 define ()와 require ()의 차이점은 무엇입니까?

함수는 모듈을 정의하는 데 사용되는 반면 함수는 모듈을로드하는 데 사용됩니다. 두 함수 모두 종속성 배열과 매개 변수로 기능을 허용합니다. 그러나 require()로 전달 된 함수는 모듈 값을 생성하는 데 사용되는 반면,

로 전달 된 함수는 모듈이로드 된 후 코드를 실행하는 데 사용됩니다.

node.js에서 requirejs를 사용할 수 있습니까? 예, node.js에서 requirejs를 사용할 수 있습니다. 그러나 Node.js에는 자체 모듈 시스템이 있으므로 요구 사항이 필요하지 않을 수 있습니다. 브라우저와 Node.js 모두에서 동일한 코드를 사용하려면 AMD API를 선호하는 경우 요구 사항이 좋은 선택 일 수 있습니다.

requirejs의 오류를 처리하는 방법은 무엇입니까? define() requirejs는 define() 콜백을 제공하여 오류를 처리합니다. 이 콜백은 모듈을로드하는 동안 오류가 발생할 때 호출됩니다. 이 콜백을 사용하여 오류에서 로그 또는 복구 할 수 있습니다.

requireJS를 사용하여 CSS 파일을로드 할 수 있습니까?

예, require-css 플러그인을 사용하여 requirejs를 사용하여 CSS 파일을로드 할 수 있습니다. 이 플러그인을 사용하면 JavaScript 모듈과 마찬가지로 CSS 파일을로드하고 기다릴 수 있습니다.

위 내용은 요구 사항이있는 라이브러리 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!