JavaScript 모듈 이해 : 번들링 및 전환
- Christopher Nolan원래의
- 2025-02-18 08:35:10975검색
귀하의 자체 응용 프로그램 코드는 일반적으로 글로벌 범위의 오염을 방지하기 위해 글로벌 유사 앱에 따라 네임 스패닝되었습니다. 이것 없이는 이름이 충돌하고 사물이 무너지기 오래 걸립니다. <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Understanding JavaScript Modules: Bundling & Transpiling ">
<span> 미래
<ex ex> 라이브러리 공통 모듈 형식 (ES6 모듈)으로 개체를 내보내십시오.
</ex></span>
<mod> 우리는 모듈을 로컬 범위로 가져 와서 사용합니다. <span>
</span>
<span>
<required> 글로벌이 필요하지 않습니까?
<ence> 소스 주문 독립성 </ence></required></span>
<p> npm 자신의 애플리케이션 코드를 네임 스페이스 할 필요가 없습니다
<load> 필요에 따라 언제든지 모듈을 동적으로로드합니다
<p> 현재
정말 </p> 정말 복잡합니다. 먼저 사용 중에 다양한 모듈 형식이 있습니다.
<pre class="brush:php;toolbar:false"><span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span></pre>
commonjs
<h3> amd
</h3> umd
<ul ul> es6 모듈
<p>
<und> 자산을위한 도구는 다양한 모양과 크기로 제공됩니다.
</und></p>
<ify> Browserify <pre class="brush:php;toolbar:false"><span>export default function $() { ... }
</span></pre>
jspm <p>
웹 팩
</p> 롤업
<br> 브런치 / Brocolli <pre class="brush:php;toolbar:false"><span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span></pre>
스프로킷
<with> gulp / grunt <ul>로 자신의 구축
<li>
<trans> 그런 다음 사용하려는 트랜스 필러가 있습니다
</trans>
</li>
<es> es6 <li>의 바벨
커피 스크립트 </li>
<li> typeScript
</li>
<there> 또한 모듈의 동적 로딩을 허용하는 다양한 라이브러리가 있습니다.
<li>
<s> request.js
<s s> system.js
<li>
<ened> 이들은 현재 사용중인 인기있는 도구 목록입니다. 초보자와 전문가 모두를위한 지뢰밭입니다. 트랜스 핑 비용은 또한 이러한 도구를 많이 혼합하고 일치시키고 다른 결과를 얻을 수 있음을 강조합니다. </ened>
</li>.
<ol> 2016 년 툴링을 통합합시다
<develop> 프론트 엔드 개발자는 오랫동안 빌드 도구를 사용해 왔지만 지난 몇 년 동안 빌드 단계가 표준이되는 것을 보았습니다. Sass 및 CoffeeScript와 같은 도구는 사전 처리 주류를 만드는 데 도움이되었지만 ES6 주변의 추진력은 이제 모든 사람이 탑승했습니다.
JavaScript 커뮤니티는 2015 년에 큰 개선을했지만 2016 년에는 툴링을 통합해야합니다. https : //t.co/hgrljisqhb— Nicolás Bevacqua (@nzgb) 2016 년 1 월 8 일
동의합니다. <h3>
<gr> Gulp와 Grunt는 지난 몇 년 동안 매우 인기가 있었으며,이 도구를 사용하면 자산을 파이프하기 위해 일련의 변환을 작성할 수 있습니다. 많은 사람들이 NPM을 통해 도구를 직접 사용하기로 선택했지만 큰 효과를 보이고 여전히 인기가 있습니다. NPM 스크립트를 위해 Gulp and Grunt를 떠난 이유를 확인하고 NPM을 빌드 도구로 사용하는 데 필요한 이유를 확인하십시오. </gr>
</h3>.<i> 개인적으로, 나는 더 이상 자산 파이프 라인 구축을 신경 쓰지 않습니다. 내가 찾고있는 것은 필요에 따라 최신 툴링을 사용할 수있는 최소 구성 도구입니다 : Sass, AutoPrefixer, Babel 및 CoffeeScript와 같은 것, 적절한 모듈. 구현, 구성 및 지속적인 유지 보수에 대해 걱정할 필요없이 시스템 및 로더. 본질적으로, 모든 개발자는 지난 몇 년 동안 자산 파이프 라인을 만드는 데 시간을 투자 해 왔으며, 이는 많은 휠 재발행이 진행되고 있으며 많은 시간이 낭비됩니다. </i><p>.
</p>
<div> 커뮤니티는 Browserify, Webpack, JSPM, Sprockets 및 Gulp와 같은 도구로 나뉩니다. 그것은 실제로 문제가 아닙니다. 모든 사람들이 분명한 길을 이해하려고하는 모든 사람들에게 혼란스러워합니다. .
출발점을 지우십시오
<few> 우리가 동의 할 수있는 몇 가지 사항이 있습니다 : <p>
</p>
ES2015 모듈은 JavaScript의 진정한 미래 모듈 형식입니다.
Babel은 오늘 선택한 ES2015 컴파일러입니다
<are> 기본 로더는 여전히 브라우저에서 사용할 수있는 데 시간이 오래 걸리고 있습니다. Telerik의 JavaScript의 미래에 대한 보고서에 따르면 전체 ES2015 지원이 모듈 로딩 장애물을 고려할 때 2 년 이상이 소요될 수 있다고합니다. <h2>.
<to> 지금 모듈을 사용하려면 어느 시점에서 CommonJS가 포함될 수 있습니다. </to>
</h2>.
<p>
<at> Browserify, Webpack 및 JSPM을 사용하여 최소 구성 설정이 어떻게 보이는지 살펴 보겠습니다. 오늘날 가장 중요한 JavaScript Bundlers입니다. </at></p>.
새로운 프로젝트
<ul>
좋아하는 텍스트 편집기에서 <h> index.html 업데이트 <li>
</li>
<need> 우리는 또한 코드를 실행하려면 서버가 필요합니다. 예를 들어 라이브 리드 기능을 갖춘 작은 제로 콘피드 HTTP 서버 인 Live-Server가 필요합니다. NPM 설치 -G 라이브 서버로 전역으로 설치하고 프로젝트 루트에서 라이브 서버를 실행하여 시작하십시오.
<ify> Browserify <li>
<ify ify> Browserify는 모든 종속성을 묶어 브라우저에서 ( '모듈')를 요구할 수 있습니다.
<r> src/lib.js를 열고 첫 번째 모듈을 추가하십시오
</r></ify>
</li>
<r> SRC/ENTRY.JS를 열면 모듈이 필요하고 사용하겠습니다.
<li>
<ip> 패키지에서 스크립트 섹션을 업데이트하십시오
</ip>
</li>
<ipt>이 스크립트를 NPM Run Browserify로 실행하십시오
<ify> Browserify는 프로젝트 루트에 Bhindle.js를 생성하며 콘솔에 가장 빠져 나오는 4 개의 출력이 나타납니다. Browserify가 수행하는 일과이 번들이 어떻게 생성되는지에 대한 자세한 내용은 egghead.io 에서 Browserify 소개를 보는 것이 좋습니다.
축하합니다! 이제 브라우저에 모듈이 있습니다! ?
<of> Browserify의 또 다른 주요 이점은 저자가 작성한 모듈뿐만 아니라 NPM 모듈에도 액세스 할 수 있다는 것입니다.
<r r> 편집 src/lib.js
<p>
<r r> src/enterd.js를 편집하고 새로운 추가 기능 를 호출하십시오<pre class="brush:php;toolbar:false"><span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span></pre>
<dle> NPM Run Browserify를 사용하여 번들을 다시 만듭니다. 브라우저에는 4와 7이 표시되어 Lodash의 SUM 기능을 성공적으로 가져오고 사용했음을 보여줍니다.
<followed> 당신이 지금까지 따라 갔다면, 지금 당신은 오늘 브라우저에서 모듈을 사용하기 시작하는 데 필요한 모든 것을 알고 있습니다. 이것은 우리가 처음에 요약 한 많은 이점을 가져옵니다. <p>.
</p>
<required> 글로벌이 필요하지 않습니까?
<ence> 소스 주문 독립성 <p>
</p>
<p> npm 자신의 응용 프로그램 코드를 네임 스케이션 할 필요가 없습니다
</p>
<at> 우리는 나중에 런타임에 모듈의 동적로드를 살펴 보겠습니다. <ul>
웹 팩
<is> Webpack은 모듈 번더입니다. Webpack은 종속성이있는 모듈을 가져 와서 해당 모듈을 나타내는 정적 자산을 생성합니다.
<a> WebPack을 호출하기 위해 package.json에 새 스크립트를 추가하겠습니다.
<li>
<n> NPM RUN WEBPACK </n>
</li>로 실행하십시오
<will> WebPack은 Bundle.js를 다시 작성하고 브라우저의 출력은 정확히 동일해야합니다.
<p> NPM 실행 Browserify 및 NPM 실행 웹 팩을 실행하고 컴파일 된 Bundle.js 파일의 차이점을 검사하십시오. 이러한 도구가 내부적으로 어떻게 작동하는지 이해하는 것은 중요하지 않습니다. 주목해야 할 중요한 점은 구현이 다르지만 CommonJS 모듈을 사용하여 동일한 코드를 표준 브라우저 친화적 인 JavaScript로 컴파일하는 동일한 작업을 수행한다는 것입니다. 각 모듈은 blydle.js 내의 함수 내부에 넣고 필요에 따라로드 할 수 있도록 ID를 할당했습니다.
</p>
<li> 이보다 웹 팩에 더 많은 </li>가 있습니다! 그것은 진정으로 모듈 번들러의 스위스 육군 칼입니다. Webpack은 또한 상자에서 개발할 수있는 훌륭한 도구, 핫 모듈 교체와 같은 것들이 변경 될 때 브라우저의 개별 모듈을 자동으로 다시로드 할 것입니다.
<growing> 다른 자산 유형에 대한 로더 목록도 증가하고 있으며 CSS- 로더 및 스타일 로더가있는 CSS조차도 CSS를 JavaScript 번들에 컴파일하여 런타임에 페이지에 주입 할 수 있습니다. 이것은이 기사의 범위를 벗어나지 만 웹 팩을 시작할 때 이것에 대해 더 많이 찾을 수 있습니다.
<cript cript> JavaScript 변환기
<of> 이들은 오늘날 사용되는 가장 인기있는 트랜스 필러 중 세 가지입니다. <li> 매우 긴 목록 js에 컴파일하는 언어에서 다른 세 가지를 사용하고 싶을 수도 있습니다.
<how> 모듈 Bundlers와 함께 사용하는 방법을 살펴보기 전에 먼저 도구를 직접 사용하는 방법을 살펴 보겠습니다.
<li>
커피 스크립트 </li>
Coffee-lib.coffee
</how>
</li></of></cript></growing></will></a></is>
</ul>
<ees ees> 참고 : Coffeescript는 모듈 에 CommonJS 구문을 사용합니다
<ipt> 커피 실행 파일을 실행하려면 package.json에 스크립트를 추가하십시오.
</ipt></ees></at></ence></required></followed></dle></r></p>
<n> NPM Run Coffee로 실행하십시오
<h3> typeScript
<s s> 편집 ts-lib.ts
</s>
</h3>
<cript> 참고 : Typescript에는 ES2015 모듈 구문과 commonjs의 혼합처럼 보이는 모듈에 대한 자체 구문이 있습니다.<ipt> package.json에 스크립트를 추가하여 TSC 실행 파일을 실행합니다 <p>
</p>
<n> npm run tsc <pre class="brush:php;toolbar:false"><span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span></pre>로 실행하십시오
<er> 컴파일러는 LODASH를 찾을 수 없다는 것에 대해 불평 할 것입니다. 유형의 정의는 TypeScript 파일이 아닌 외부 모듈로 작동하는 방법을 알기 위해 유형 정의가 필요합니다. 다음과 같이 정의 파일을 가져올 수 있습니다
<p>
</p> babel
es6-lib.js 편집
<el> 참고 : Babel은 사랑스러운 새로운 ES2015 모듈 구문을 이해합니다
<a a> babel은 <pre class="brush:php;toolbar:false"><span>export default function $() { ... }
</span></pre>를 사용할 사전 설정을 지정하기 위해 구성 파일이 필요합니다.
<h3>
<ipt> babel cli를 실행하려면 package.json에 스크립트를 추가하십시오.
</ipt>
</h3>
<n> npm run babel 로 실행하십시오
/dist의 파일에는 이제 이전에 사용한 것처럼 Browserify 또는 Webpack에서 완벽하게 작동하는 CommonJS 모듈 형식의 ES5 코드가 포함되어 있습니다. 먼저 CommonJS를 사용하여 ES5로 트랜스 파일을 내린 다음 번들로 바꾸거나 다른 패키지를 사용하여 단일 단계에서 둘 다 수행 할 수 있습니다. .
Browserify를 위해 <er> 플러그인 Coffeefy, Tsify 및 Babelify가 트랜스 파일 및 번들로 제공됩니다.
<ack> 웹 팩의 경우 다른 언어로 된 모듈을 요구하기 위해 로더 커피 로더, TS- 로더 및 바벨 로더가 있습니다.
jspm <pre class="brush:php;toolbar:false"><span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span></pre>
<is is> JSPM은 Systemjs Universal Module Loader의 패키지 관리자입니다.
<takes takes> JSPM은 다른 접근 방식을 취하고 모듈 로더 System.js로 시작합니다. System.js는 개발대로 로더 사양을 따르는 프로젝트입니다.
<ize> JSPM 프로젝트를 설치하고 초기화하십시오
<p>
<the> 모든 기본값을 받아들이고 Babel이 트랜스 필러로 사용되도록하십시오. 이는 ES6 스타일 모듈로 실행될 때 Babel을 사용하도록 System.js를 구성합니다.
<h h> index.html로로드 및 구성 System.js </h></the></p>
<p>
<ows> 브라우저에는 몇 가지 요청이 제정되고 Lodash의 경우 404가 표시됩니다. JSPM은 기본적으로 JSPM_Packages 디렉토리에서 패키지를로드하기 때문입니다.
<m m> jspm을 실행하여 Lodash를 설치하여 해당 디렉토리에 lodash를 설치하면 콘솔, 4 및 7에 예상 출력이 표시됩니다. 다음과 같은 일이 있습니다.
</m></ows></p>
<j j> enther.js 파일은 System.import ( 'src/enterd.js')와 함께 동적으로로드되고 있습니다
<ss> system.js는 entry.js를로드합니다.
<s s> system.js는 lib.js를로드하고, lodash/sum이 필요하다는 것을보고 그것을 가져옵니다. <pre class="brush:php;toolbar:false"><span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span></pre>.
</s><p>
<ss> System.js는 ES6과 직접 작업하는 방법을 알고 Entry.js를 동적으로 요구하고 ES6 모듈이 필요하고 즉시 컴파일합니다.
</ss></p>
<try> 당신은 또한 한 번에 하나씩 해당 라인을 타락시켜 CoffeeScript 또는 TypeScript 모듈의 ES5 컴파일 버전을로드 할 수 있습니다. 또 다른 옵션은 System.js 플러그인을 사용하여 사전 컴파일 된 ES5 코드를 요구하지 않고 코드를 전환하는 것입니다.
<scr> jspm <span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span> <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span> <span><span><span><title</span>></span>Modules!<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span> <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>로 번들을 생성하기 위해 package.json에 최종 스크립트를 추가하십시오.
<p>
<n> npm run jspm </n></p>로 실행하십시오<ment> 마지막으로 index.html에서 blld.js의 스크립트 태그와 브라우저는 추가 HTTP 요청없이 프로덕션 준비된 번들을로드해야합니다.
<p>
<web> 웹 팩 재 방문
<ack> 우리의 Webpack 예제는 기본 옵션을 사용하는 가장 간단한 예입니다. commonjs 모듈을 단일 번들로 내리는 Entry.js를 컴파일했습니다. Webpack으로 더 멋진 작업을 수행 할 때 모든 로더 구성에 대한 사용자 정의 구성 파일을 만들고 싶을 것입니다.
<ack> 프로젝트의 루트에서 webpack.config.js를 작성하십시오
</ack></ack></web></p>
<h> index.html index
<pre class="brush:php;toolbar:false"><span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span></pre>
<ers> Babel, Coffeescript 및 TypeScript로 전환하기 위해 로더를 설치하십시오.
<h2>
<ack> 구성 파일에서 번들을 생성하기 위해 Webpack을 전 세계적으로 설치하고 인수없이 실행하십시오.
</ack>
</h2>
<p> 이제 WebPack은 이러한 파일 확장에 이러한 로더를 사용한다는 것을 알고 있으므로 Entry.js에서 ES6, CoffeeScript 또는 TypeScript를 자유롭게 사용할 수 있습니다.
</p>
<p>
<much> 여기에서 다루는 것보다 웹 팩에 훨씬 더 많은 것이 있지만,이 간단한 설정은 좋은 출발점입니다. </much></p>.
<again> 거기에 다시 돌아와서 <p>
<end> 그래서 우리는 모듈 탐색을 끝내고 많은 문제를 해결하고 툴링이 우리의 방식으로 진행되지 않으면 응용 프로그램의 복잡성을 실제로 줄일 수 있습니다. 아직 모듈을 사용하지 않는다면 지금은 시간입니다. 자산 파이프 라인을 구축하는 불필요한 시간을 소비 할 필요가 없으며 대신 작동하는 간단한 도구를 사용하십시오.
<is> Webpack은 현재 Juggernaut이며 거의 모든 것을 수행하도록 구성 할 수 있습니다. JSPM은 모든 번들링 요구에 맞는 훌륭한 도구이며 다양한 형식으로 작동하며 훌륭한 개발자 경험이 있습니다. Browserify는 여전히 견고한 옵션입니다. 현대 모듈 Bundlers의 할아버지는 Webpack의 많은 사랑받는 기능 (예 : 번들 분할 및 핫 재 장전)을 포함하도록 성장했습니다. 마지막으로 System.js는 런타임에 추가 모듈을로드 할 수 있어야 할 때에 적합합니다.
<want> 하나의 프로젝트에서 위의 모든 도구를 사용하고 싶지는 않지만이 세 가지 인기있는 옵션과 필요할 때 트랜스 필러를 사용할 수있는 방법을 이해하는 것이 중요합니다. 모듈 만 사용하려면 기본 옵션이있는 Browserify, JSPM 또는 Webpack이 작업을 수행합니다.
<ing> 툴링을 간단하게 유지하고 구성 표시등을 유지하십시오. 행복한 번들. <ling><h2>Frequently Asked Questions (FAQs) about JavaScript Modules, Bundling, and Transpiling</h2>
<difference> JavaScript 모듈, 번들링 및 전환의 차이점은 무엇입니까? <h3> JavaScript 모듈은 다른 스크립트에서 가져 와서 사용할 수있는 개별 코드 단위입니다. 그들은 코드를 구성하는 데 도움이되어보다 관리하기 쉽고 재사용 가능합니다. 반면에 번들링은 여러 자바 스크립트 파일을 단일 파일로 결합하는 프로세스입니다. 이는 HTTP 요청 수를 줄이기 위해 수행되어 웹 응용 프로그램의 성능을 크게 향상시킬 수 있습니다. 전환은 소스 코드를 한 언어 또는 버전으로 변환하는 프로세스입니다. JavaScript의 맥락에서, 그것은 종종 새로운 JavaScript 구문을 구형 브라우저와의 호환성을 위해 이전 버전으로 변환하는 것을 말합니다. </h3> JavaScript에서 번들링이 중요한 이유는 무엇입니까? <p> </p> 번들링은 여러 가지 이유로 Javascript에서 중요합니다. . 첫째, 여러 개의 JavaScript 파일을 하나로 결합하여 HTTP 요청 수를 줄입니다. 이는 웹 응용 프로그램의 성능을 크게 향상시킬 수 있습니다. 둘째, 번들링을 사용하면 지원하지 않는 브라우저에서 모듈을 사용할 수 있습니다. 마지막으로, 번들링은 또한 Minification이라는 프로세스를 포함하여 JavaScript 파일의 크기를 줄이고 성능을 더욱 향상시킵니다. <h3> JavaScript Transpiler의 역할은 무엇입니까? </h3> <p> a JavaScript Transpiler와 같은 JavaScript Babel은 JavaScript 코드가 다른 브라우저에서 호환되도록하는 데 중요한 역할을합니다. 최신 JavaScript 구문을 대부분의 브라우저에서 지원하는 이전 버전으로 변환하여이를 수행합니다. 이를 통해 개발자는 브라우저 호환성 문제에 대해 걱정하지 않고 JavaScript의 최신 기능을 사용할 수 있습니다. </p> JavaScript 모듈은 어떻게 작동합니까? <h3> JavaScript 모듈은 특정 변수 또는 특정 변수를 내보내는 독립형 코드입니다. 다른 모듈에서 사용할 수있는 기능. 모듈이 가져 오면 내보내는 변수 또는 함수를 가져 오는 스크립트에서 사용할 수있게됩니다. 이를 통해 코드 재사용 및 더 나은 코드 구성이 가능합니다. </h3> 인기있는 JavaScript 번들링 도구는 무엇입니까? <p> </p> 인기있는 JavaScript 번들링 도구에는 웹 팩, 롤업 및 소포가 포함됩니다. 이러한 도구는 JavaScript 파일을 번들뿐만 아니라 CSS 및 이미지와 같은 다른 자산의 코드 분할, 게으른로드 및 처리와 같은 기능을 제공합니다. <h3> 현대 JavaScript를 작성하는 데 어떻게 도움이됩니까? </h3> <p> 개발자는 호환성 문제에 대해 걱정하지 않고 최신 기능과 구문을 사용하여 최신 JavaScript를 작성할 수 있습니다. 트랜스 필러는 최신 JavaScript를 대부분의 브라우저와 호환되는 버전으로 변환합니다. 이렇게하면 JavaScript 코드가 다른 브라우저에서 일관되게 실행되도록합니다.<j> 번들로 번들리지 않고 JavaScript 모듈을 사용할 수 있습니까? <h3> </h3> 예, 번들링없이 JavaScript 모듈을 사용할 수 있습니다. 그러나 여러 HTTP 요청으로 인해 성능 문제가 발생할 수 있습니다. 또한 모든 브라우저가 JavaScript 모듈을 지원하는 것은 아니므로 번들링은 호환성을 보장하는 데 도움이 될 수 있습니다. <p> 번들링과 미니 화의 차이점은 무엇입니까? </p> <h3> 번들링은 여러 자바 스크립트 파일을 하나로 결합하여 줄을 줄이는 과정입니다. HTTP 요청 수. 반면에 미니는 JavaScript 파일에서 불필요한 문자 (공백 및 주석)을 제거하여 크기를 줄이는 과정입니다. 번들링과 미니 화는 웹 응용 프로그램의 성능을 향상시킬 수 있습니다. </h3> 프로젝트에 올바른 번들링 도구를 선택하는 방법은 무엇입니까? <p> 번들링 도구의 선택은 프로젝트 요구 사항에 따라 다릅니다. . 고려해야 할 요소에는 프로젝트의 규모, 필요한 기능 (코드 분할 또는 기타 자산 처리) 및 개인 선호도가 포함됩니다. 몇 가지 다른 도구를 시험해보고 프로젝트에 가장 적합한 도구를 확인하는 것이 좋습니다. </p> JavaScript 모듈, 번들링 및 전환의 미래는 무엇입니까? JavaScript의 미래는 무엇입니까? 모듈, 번들링 및 트랜스 핑은 유망 해 보입니다. JavaScript의 지속적인 진화로 인해 더 고급 기능과 구문을 기대할 수 있으며, 이는 구형 브라우저와의 호환성을 위해 전환해야합니다. 번들링은 성능의 이유로 계속 중요 할 것입니다. 모듈은 JavaScript의 표준 부분이되고 있으며 브라우저에서 더 나은 지원을 기대할 수 있습니다.</j></p></difference></ling></ing></want></is></end></p></again></ers></h></ment></scr></try></ss></j></ize></takes></is></ack></er></n></a></el></er></n></ipt></cript></n></r></of></ify></ipt></r></ify></need></h>
</ul></are></few>
</div></develop>
</ol></s></s>
</li></there></es>
</ul></with></ify>
</ul></load></p></mod>
위 내용은 JavaScript 모듈 이해 : 번들링 및 전환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!