Babel & Gulp를 사용하여 ES6 모듈을 AMD 및 CommonJS로 전환합니다.

코어 포인트

ECMAScript 6 (ES6)은 모듈 형태로 응용 프로그램의 다른 부분을로드하는 기능을 포함하여 현재 사용 척도에 더 잘 맞도록 JavaScript를 많이 개선했습니다. 그러나 모든 브라우저가 모든 ES6 기능을 구현 한 것은 아니며 Babel 및 Traceur와 같은 번역가가 작동하는 곳입니다.

babel 및 gulp를 사용하여 ES6 모듈을 CommonJS 또는 AMD로 변환하여 오늘날의 브라우저에서 읽을 수 있습니다. 이 프로세스에는 Babel의 GULP 작업을 사용하여 모듈을 기존 모듈 시스템 중 하나로 변환 한 다음 브라우저를 사용할 수있는 응용 프로그램을 단일 파일로 패키지하는 것이 포함됩니다.

commonjs는 Node.js에서 사용하는 동기 모듈 시스템으로, 요구 함수를 사용하여 모듈을로드하고 모듈 개체의 내보내기 속성을 사용하여 내보내는 모듈을로드합니다. ES6 모듈을 CommonJS로 변환하려면 Babel, Browserify 및 Gulp의 조합을 사용하는 것이 포함됩니다.
• Async Module Defince (AMD) 시스템을 사용하면 여러 종속 모듈을 병렬로로드 할 수 있습니다. ES6 모듈을 AMD로 변환하려면 Babel, EquireJS 및 Gulp를 사용합니다. 그런 다음 Index.html 페이지에서 최종 스크립트를 직접 참조하여 브라우저에서 볼 수 있습니다.
• ecmascript 6 (일명 ECMAScript 2015 또는 ES6), 다음 버전의 JavaScript 사양이 승인되었으며 브라우저 공급 업체가이를 구현하기 위해 노력하고 있습니다. 이전 버전의 ECMAScript와 달리 ES6은 언어를 크게 바꾸어 오늘날의 사용 척도에 잘 적응할 수있었습니다. SitePoint에는 이러한 기능을 다루는 몇 가지 기사가 있습니다.
브라우저는 아직 모든 기능을 구현하지는 않았지만 개발 중에 ES6을 활용하고 애플리케이션을 전달하기 전에 브라우저가 이해할 수있는 버전으로 변환 할 수 있습니다. Babel과 Traceur는이 목적으로 사용되는 주요 번역가 중 두 명입니다. Microsoft의 JavaScript 유형 Superset Typescript는 ES6 번역기로도 사용할 수 있습니다.
• 이전 기사에서는 es6을 사용하여 각도 1.x 응용 프로그램을 작성하는 방법을 설명했습니다. 그 게시물에서 나는 Traceur의 인스턴트 번역기를 사용하여 응용 프로그램을 실행했습니다. 작동하는 동안 미리 번역하고 브라우저에서 수행 해야하는 작업량을 줄이는 것이 가장 좋습니다. 이 기사에서는 동일한 샘플 응용 프로그램을 ES5로 변환하고 모듈을 CommonJS 또는 AMD로 변환하여 Babel을 사용하여 오늘날의 브라우저에서 실행할 수 있습니다. 예제는 각도를 기반으로하지만, 번역 기술은 유효한 ES6 코드에 사용될 수 있습니다.
언제나 그렇듯이 GitHub 저장소 에서이 기사의 첨부 코드를 찾을 수 있습니다.
모듈의 중요성

큰 응용 프로그램을 작성하는 데 사용되는 모든 언어에서 주요 기능은 모듈 형태로 응용 프로그램의 다른 부분을로드하는 기능입니다. 모듈은 코드를 더 간결하게 만드는 데 도움이 될뿐만 아니라 글로벌 범위의 사용을 줄이는 데 역할을합니다. 모듈의 내용은 명시 적으로로드되지 않는 한 다른 모듈에 제공되지 않습니다.

모듈의 중요성은 응용 프로그램에만 국한되지 않습니다. 대형 JavaScript 라이브러리조차도 모듈 시스템을 사용하여 모듈로 객체를 내보낼 수 있으며 이러한 라이브러리를 사용하는 응용 프로그램은 필요에 따라 이러한 모듈을 가져올 수 있습니다. Angular 2와 Aurelia 가이 기능을 사용하기 시작했습니다.

ES6에서 모듈을 사용하는 방법을 간단히 살펴 보려면 읽기 : ES6 모듈 이해 샘플 응용 프로그램

샘플 응용 프로그램의 테마는 가상 책장입니다. 다음 페이지가 포함되어 있습니다

홈 : 읽기 또는 아카이브로 이동할 수있는 활성 책 목록을 표시합니다.

<:> 책 추가 페이지 추가 : 책 제목과 저자 이름을 수락하여 책장에 새 책을 추가하십시오. 중복 제목을 허용하지 않습니다. 아카이브 페이지 : 모든 보관 된 책을 나열하십시오.

응용 프로그램은 AngularJS 1.3 및 ES6을 사용하여 구축됩니다. 앱 폴더의 파일을 보면 현재 모듈에서 객체를 내보내고 다른 모듈에서 객체를 가져 오기 위해 키워드를 내보내고 가져옵니다. 이제 우리의 임무는 이러한 모듈을 Babel의 GULP 작업을 사용하여 기존 모듈 시스템 중 하나로 변환하는 것입니다.

그러나 나는 각도를 사용하지 않습니다. ES6 모듈을 CommonJS/Amd

로 변환하고 싶습니다.

걱정하지 마세요! 우리는 당신을위한 준비가되어 있습니다. 적은 양의 조정만으로 아래에서 볼 수있는 레시피는 ES6 모듈과 관련된 모든 프로젝트에서 사용할 수 있습니다. 각도는 여기서 중요하지 않습니다.
CommonJS로 변환
CommonJS는 CommonJS 그룹에 의해 정의 된 모듈 시스템입니다. 요구 함수를 사용하여 모듈이로드되고 모듈 개체의 내보내기 속성을 사용하여 모듈이 내보내는 동기 모듈 시스템입니다. 모듈 개체는 기본적으로 모든 모듈에서 사용할 수 있어야합니다.
3. 우리는 또한 시작하기 전에 NPM 패키지를 설치해야합니다. 이를 통해 Babel 및 Browserify를 사용하여 ES6 모듈을 공통 모듈 형식 중 하나로 변환하고 브라우저를 사용할 단일 파일로 응용 프로그램을 패키지 할 수 있습니다.

Gulp-Babel-ES6 코드를 일반 es5 로 변환합니다 Browserify - 모든 종속성을 번들로

를 묶어 브라우저에서 ( '모듈')를 요구할 수 있습니다. Vinyl-Source-stream-Gulp-Browserify 래퍼가 필요하지 않도록 Browserify 모듈을 직접 처리하십시오. Vinyl-Buffer-스트림을 버퍼로 변환합니다 (스트림을 지원하지 않는 Gulp-Uglify에 필요함) gulp-uglify-압축 파일 del - 파일과 폴더를 삭제할 수 있습니다 Gulp-Rename-파일 이름을 바꿀 수있는 플러그인

당신은 다음을 입력 하여이 모든 것을 얻을 수 있습니다

<code>npm install gulp-babel browserify gulp-browserify vinyl-source-stream vinyl-buffer gulp-uglify del gulp-rename --save-dev</code>

이제 gulpfile.js 에서이 패키지를 사용해 보겠습니다. 모든 ES6 파일을 가져 와서 바벨로 전달하려면 작업을 작성해야합니다. Babel의 기본 모듈 시스템은 CommonJS이므로 Babel 기능에 옵션을 보낼 필요가 없습니다.

여기에는 너무 혼란스러운 것이 없기를 바랍니다. 우리는 앱 디렉토리 및 하위 디렉토리에 JavaScript 파일을 가져 오는 ES6-Commonjs라는 작업을 선언합니다. 그런 다음 Babel을 통해 전달하여 개별 파일을 ES5 및 CommonJS 모듈로 변환하고 변환 된 파일을 DEST/TEMP 폴더로 복사합니다. ES6-Commonjs 작업에는 ES6-Commonjs 작업이 실행되기 전에 Dest 디렉토리와 파일을 삭제하는 Clean-Temp라는 종속성이 있습니다.

<code>var babel = require('gulp-babel'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    del = require('del');

gulp.task('clean-temp', function(){
  return del(['dest']);
});

gulp.task('es6-commonjs',['clean-temp'], function(){
  return gulp.src(['app/*.js','app/**/*.js'])
    .pipe(babel())
    .pipe(gulp.dest('dest/temp'));
});
</code>

코드를 명확하게하고 모듈 시스템을 지정하려면 다음과 같이 바벨 사용을 수정할 수 있습니다.

이제 Browserify를 적용하고 Uglify 패키지를 사용하여 출력을 압축 하여이 단일 파일에서 단일 번들 파일을 만들 수 있습니다. 다음 코드 스 니펫은 다음을 보여줍니다

위의 작업에는 두 가지 종속성이 있습니다. 첫 번째는 Bundle-Commonjs-Clean 작업으로 ES5/CommonJS 디렉토리를 삭제합니다. 이러한 작업이 실행되면 작업은 결합 및 압축 파일 app.js를 ES5/CommonJS 폴더에 넣습니다. 이 파일은 index.html에서 직접 참조 할 수 있으며 페이지는 브라우저에서 볼 수 있습니다.

마지막으로 작업을 시작하기 위해 작업을 추가 할 수 있습니다.

<code>.pipe(babel({
  modules:"common"
}))
</code>

amd 로 변환합니다 이름에서 알 수 있듯이 AMD (Async Module Definition) 시스템은 비동기 모듈 로딩 시스템입니다. 여러 종속 모듈을 병렬로로드 할 수 있으며 다른 모듈을로드하기 전에 하나의 모듈이 완전히로드 될 때까지 기다리지 않습니다.

require.js는 AMD를 처리하는 데 사용되는 라이브러리입니다. 요구 사항은 Bower를 통해 사용할 수 있습니다

<code>gulp.task('bundle-commonjs-clean', function(){
  return del(['es5/commonjs']);
});

gulp.task('commonjs-bundle',['bundle-commonjs-clean','es6-commonjs'], function(){
  return browserify(['dest/temp/bootstrap.js']).bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(rename('app.js'))
    .pipe(gulp.dest("es5/commonjs"));
});
</code>

우리는 또한 응용 프로그램을 묶기 위해 require.js의 gulp 플러그인이 필요합니다. 이렇게하려면 Gulp-Requirejs NPM 패키지를 설치하십시오.

이제 ES6 코드를 ES5 및 AMD로 변환 한 다음 requireJS로 번들을 변환하는 작업을 작성해야합니다. 이러한 작업은 CommonJS 섹션에서 생성 된 작업과 매우 유사합니다.

index.html 페이지의 최종 스크립트를 사용하려면 requirejs, 생성 된 스크립트에 대한 참조를 추가 한 다음 부트 스트랩 모듈을로드해야합니다. 앱 폴더 내부의 bootstrap.js 파일은 AngularJS 응용 프로그램을 부팅하므로 AngularJS 응용 프로그램을 시작하려면로드해야합니다.

<code>gulp.task('commonjs', ['commonjs-bundle']);
</code>

결론 모듈은 JavaScript가 오랫동안 부족한 기능입니다. 그들은 ES6에 나타날 것이지만 불행히도 현재의 기본 브라우저 지원은 열악합니다. 그러나 이것이 오늘날 당신이 그것들을 사용할 수 없다는 것을 의미하지는 않습니다. 이 튜토리얼에서는 ES6 모듈을 Gulp, Babel 및 다양한 플러그인을 사용하여 브라우저에서 실행할 수있는 CommonJS 및 AMD 형식으로 변환하는 방법을 보여줍니다.

ES6에 관해서는? ES6은 출시 이후 커뮤니티에서 많은 관심을 받았습니다. Bootstrap, Aurelia, Angular 2 및 기타 많은 JavaScript 라이브러리 또는 프레임 워크를 포함한 JavaScript 플러그인에서 사용되었습니다. TypeScript는 또한 모듈을 포함한 일부 ES6 기능에 대한 지원을 추가합니다. 오늘날의 ES6을 배우고 사용하면 향후 코드를 변환하는 데 필요한 노력이 줄어 듭니다.

es6 모듈을 AMD로 변환하고 babel 및 gulp 를 사용하여 AMD로 변환하기위한 FAQS (FAQS) Babel과 Gulp를 사용하여 ES6 모듈을 AMD 및 CommonJS로 변환하는 목적은 무엇입니까?

Babel 및 Gulp를 사용하여 ES6 모듈을 AMD로 변환하고 CommonJS를 사용하는 것은 개발자가 최신 버전의 JavaScript (ES6)를 사용하여 코드를 작성한 다음 다양한 JavaScript 엔진을 이해할 수있는 버전으로 변환 할 수있는 프로세스입니다. 모든 브라우저 나 환경이 최신 ES6 기능을 지원하는 것은 아니기 때문에 특히 유용합니다. 코드를 번역함으로써 개발자는 응용 프로그램이 다른 플랫폼에서 원활하게 실행되도록 할 수 있습니다.

Babel은 ES6 모듈을 어떻게 번역하는 데 도움이됩니까? Babel은 주로 ECMAScript 2015 (ES6) 코드를 이전 JavaScript 엔진에서 실행할 수있는 역 호환 JavaScript 버전으로 변환하는 데 주로 사용되는 JavaScript 컴파일러입니다. ES6 모듈을 번역 할 때 Babel은 "Babel-Plugin-Transform-Modules-Commonjs"와 같은 플러그인을 제공하여 ES6 모듈 구문을 널리 지원되는 CommonJS 구문으로 변환합니다. 번역 과정에서 Gulp는 어떤 역할을합니까?

Gulp는 번역 프로세스를 자동화하는 데 사용할 수있는 작업 러너입니다. ES6 파일의 변경 사항을 모니터링하고 Babel Translator를 자동으로 실행하도록 구성 할 수 있습니다. 이를 통해 개발자는 코드를 변경할 때마다 번역기를 수동으로 실행할 수 있습니다.

es6 모듈을 commonjs 대신 AMD로 변환 할 수 있습니까?

예, ES6 모듈을 CommonJS 대신 비동기 모듈 정의 (AMD)로 변환 할 수 있습니다. Babel 은이 목적을 위해 "Babel-Plugin-Transform-Modules-AMD"라는 플러그인을 제공합니다. AMD는 웹 브라우저 환경에서 많은 수의 모듈을 처리 할 때 특히 유용합니다.

AMD와 CommonJS의 차이점은 무엇입니까?

AMD와 CommonJS는 모두 모듈 형식입니다. 그들 사이의 주요 차이점은 종속성을 처리하는 방법입니다. AMD는 비동기의 종속성로드를 지원하여 브라우저 환경에서 성능을 향상시킬 수 있습니다. 반면에 CommonJS는 종속성을 동기식으로로드하며 Node.js와 같은 서버 환경에서 더 간단하고 잘 작동합니다.

번역 할 ES6 기능을 지정하는 방법은 무엇입니까?

babel은 .babelrc (또는 babel.config.js)라는 구성 파일을 사용하여 번역 할 ES6 기능을 지정할 수 있습니다. 이 파일에 사용할 플러그인 또는 사전 설정을 나열 할 수 있습니다. 예를 들어, ES6 모듈을 번역하려면 구성에 "babel-plugin-transform-modules-commonjs"또는 "babel-plugin-transform-modules-amd"가 포함됩니다.

ES6 모듈을 사용하면 어떤 이점이 있습니까?

ES6 모듈은 JavaScript 개발에 많은 이점을 제공합니다. 그들은 모듈에서 함수, 객체 또는 값을 가져오고 내보내기위한 표준 구문을 소개하여 코드를보다 구성하고 관리 할 수있게 할 수 있습니다. 또한 정적 분석을 지원하여 성능을 향상시키고 런타임이 아닌 컴파일 시간에 오류를 포착합니다.

번역 된 코드를 디버그하는 방법은 무엇입니까?

실행 된 코드가 작성한 코드와 다르기 때문에 번역 된 코드 디버깅은 어려울 수 있습니다. 그러나 Babel은 소스 매핑 형태를 통해이 문제에 대한 솔루션을 제공합니다. 소스 맵은 번역 된 코드를 원래 소스 코드에 맵핑하는 파일로, 원래 ES6 코드를 실행하는 것처럼 코드를 디버깅 할 수 있습니다.

다른 JavaScript 프레임 워크와 함께 Babel과 Gulp를 사용할 수 있습니까?

예, Babel과 Gulp는 특정 JavaScript 프레임 워크에 구속되지 않습니다. 그것들은 React, Angular, Vue.js 등을 포함한 모든 ES6 지원 프레임 워크와 함께 사용할 수 있습니다.

ES6 모듈의 번역을위한 Babel 및 Gulp에 대한 대안이 있습니까?

예, Babel 및 Gulp에 대한 몇 가지 대안이 있습니다. ES6 모듈을 번역하는 데 사용할 수 있습니다. 여기에는 TypeScript, Traceur 및 롤업이 포함됩니다. 이 도구에는 각각 장단점이 있으므로 최선의 선택은 특정 요구 사항과 선호도에 따라 다릅니다.

위 내용은 Babel & Gulp를 사용하여 ES6 모듈을 AMD 및 CommonJS로 전환합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!