IT Share you

브라우저에서 CommonJS 모듈을 요구하는 방법은 무엇입니까?

shareyou 2020. 12. 12. 12:41
반응형

브라우저에서 CommonJS 모듈을 요구하는 방법은 무엇입니까?


CommonJS 모듈을 브라우저에서 클라이언트 측 자바 스크립트로로드하는 가장 좋은 방법은 무엇입니까?

CommonJS 모듈은 기능을 module.exports네임 스페이스에 배치하고 일반적으로 require(pathToModule)서버 측 스크립트에 포함되어 있습니다. 클라이언트에로드하는 것은 동일한 방식으로 작동 할 수 없습니다 (교체 필요, 비동기 성 고려 등).

모듈 로더 및 기타 솔루션 : Browserify, RequireJS, yabble 등 또는 단순히 모듈을 변경하는 방법을 찾았습니다. 가장 좋은 방법은 무엇이며 그 이유는 무엇입니까?


필자는 과거에 requirejs를 광범위하게 사용 했으며 ( 2010 년 BBC iPlayer 에서 구현 ) 잘 작동합니다. CommonJS 모듈을 처리 할 수 ​​있지만 추가 래퍼가 필요합니다. node.js에서도 이러한 모듈을 사용하려면 서버 측에서도 requirejs를 사용해야합니다. 이것은 관용적 인 node.js JavaScript가 아니기 때문에 선호하지 않습니다.

내가 사용하고 webmake을 하고 browserify 몇 가지 프로젝트에 지난 해에. 처음에는 컴파일 단계로 인해 실망했지만 올해 광범위하게 사용했기 때문에 이것이 문제가 아니라고 말할 수 있습니다.

Browserify에는 매우 잘 작동하는 시계 기능이 포함되어 있습니다. Webmake는 watcher (예 : watchr )에 연결되거나, express 또는 connect 앱의 일부로 사용할 수있는 webmake-middleware 모듈을 사용할 수 있습니다. 이것은 저장할 때마다 JavaScript를 컴파일하는 것이 아니라 실제로 요청할 때만 컴파일된다는 장점이 있습니다. Connect 를 사용하면 서버 (정적)를 만드는 것이 간단하므로 백엔드없이 프런트 엔드를 개발하려는 경우 파일을 제공 할 작은 정적 node.js 서버를 만들 수 있습니다.

보너스 : 빌드 된 코드를 항상 처리하므로 빌드 스크립트가 필요하지 않습니다.


다음은 GitHub의 각 인기도 (감시자 수)에 따라 정렬 된 현재 옵션의 포괄적 인 목록입니다.

브라우저에서 require () 사용 옵션 (Wayback Machine 아카이브)


Browserify어떻 습니까? 설명은 "노드 모듈 및 npm 패키지에 대한 브라우저 측 require ()"이며, 필요한 것을 들립니다.


CommonJS 컴파일러 https://github.com/dsheiko/cjsc 왜? nodejs (CommonJs) 모듈 / treat 모듈과 정확히 nodejs / 및 UMD와 함께 잘 작동하고, 컴파일 된 JavaScript에 최소한의 추가 코드를 가져오고, 코드, 소스 맵 및 다른 사람이 할 수없는 트릭을 건드리지 않고 타사 라이브러리의 전역을 내보낼 수 있습니다. :

var str = require( "lorem-ipsum.txt" );
console.log( str );

산출:

 Lorem ipsum dolor 
 sit amet, consectetur 
 adipiscing elit. Morbi...

여기 슬라이드 https://speakerdeck.com/dsheiko/modular-javascript-with-commonjs-compiler


Webmake 는 옵션 중 하나입니다. 나는 그것을 사용하여 20 개가 넘는 패키지의 200 개가 넘는 모듈로 빌드 된 애플리케이션을 포장합니다. 효과가있다.

몇 가지 예를 보려면 다음을 확인하십시오. SoundCloud Playlist Manager , 엄격하게 클라이언트 측이며 Webmake로 빌드되었습니다.


여기에 나열된 다른 것을 시도했다고 말할 수는 없지만 다음과 같은 이유로 RequireJS를 좋아합니다.

  • CommonJS와 유사한 방식으로 작동합니다.
  • 사용하기 쉽습니다.
  • 다가오는 새로운 표준 중 일부를 구현합니다.
  • NodeJS에서 사용할 수 있으므로 서버와 클라이언트에서 동일한 파일을 사용할 수 있습니다.
  • 프로덕션에 배포하기위한 미니 파이어 / 패커가 포함됩니다.
  • 플러그인이 있습니다. HTML 파일을로드 할 수있는 텍스트 플러그인은 대형 앱에 매우 유용합니다.

참고 URL : https://stackoverflow.com/questions/7576001/how-to-require-commonjs-modules-in-the-browser

반응형