developer tip

패키지 관리자 : Bower 대 jspm

copycodes 2020. 10. 16. 07:33
반응형

패키지 관리자 : Bower 대 jspm


Bowerjspm어떻게 다릅니 까? Bower가 SystemJS 범용 모듈 로더 에 대한 jspm 기능을 제공 할 수 있습니까 ?


잘 JSPM은 Bower보다 훨씬 크고 야심 찬 프로젝트입니다. Bower는 웹에서 하드 디스크로 필요한 소스 파일을 다운로드하는 목적이 하나뿐입니다. 소비자로서, bower는 다른 일을하지 않습니다. bower에서 스크립트 파일을 실행하려면 각각에 대한 스크립트 태그를 만들어야합니다.

jspm은 모듈 다운로더가 아닙니다. 언급 한 기본 systemjs를 다운로드합니다. SystemJS는 가능한 한 https://whatwg.github.io/loader/에 가깝게 구현됩니다 . 실제로 JSPM의 작성자는 사양 프로세스에 매우 적극적으로 참여하고 있습니다. systemjs를 사용하면 ES6 (브라우저에서 트랜스 파일), CommonJS 또는 AMD 모듈을 빌드하지 않고도 브라우저에서로드 할 수 있습니다. ES6 모듈뿐만 아니라 traceur / babeljs / typescript에서 지원하는 다른 모든 ES6 기능. 실행할 때 선택한 컴파일러에 따라 jspm init. SystemJS는 브라우저뿐만 아니라 node.js에서 1 : 1로 작동하므로 앱 단위 테스트를 쉽게 수행 할 수 있습니다.

또한 jspm build프로덕션으로 이동해야 할 때 번들을 빌드 할 수 있습니다 ( ). 따라서 jspm (+ systemjs)가 더 강력한 도구라는 것이 분명합니다. 따라서 경험상 :

  • jquery를 빠르게 가져 와서 서버 측 템플릿 HTML에 포함해야합니까? 일반 스크립트 태그로 이동하십시오. Bower는 더 이상 사용되지 않습니다.
  • 큰 JS 앱을 빌드해야합니까? Webpack으로 이동하십시오. JSPM은 임계 질량에 도달하지 못했고 모두가 웹팩을 수행하고 있습니다.

Capaj의 답변에 추가하려면 :

작은 프로젝트가 있다면 어쨌든 jspm으로 가십시오! 미래입니다! (누가 알면 상황이 바뀌지 만 이것은 좋은 내기입니다).

소규모 프로젝트 사용 :

$ jspm install jquery

그런 다음 HTML에서 :

    <script src="jspm_packages/system.js"></script><!-- required -->
    <script src='config.js'></script><!-- required -->
    <script type="module">
        System.import('path/to/your/main.js')
    </script>

그런 다음 main.js에서 :

import $ from 'jquery'; // ES6-style import
// do whatever with jQuery here.

CommonJS, AMD 또는 ES 6 모듈 형식을 사용할 수 있습니다. JSPM은 파일에서 자동으로 감지합니다 (동일한 파일에서 혼합 및 일치는 불가능).

var $ = require('jquery'); // CommonJS-style import
// do whatever with jQuery here.
define(['jquery'], function($) { // AMD-style import
    // do whatever with jQuery here.
})

참고 URL : https://stackoverflow.com/questions/25416813/package-manager-bower-vs-jspm

반응형