스크립트 실행이

Question

나는 http://javascriptplayground.com/blog/2013/11/backbone-browserify/ 같은 Browserify에 많은 기사를 읽고 단계 등 다음과 같이 항상있다 :

$ browserify app/app.js | uglifyjs > app/bundle.js 

이 스크립트의 실행 전에 할 것 같다 브라우저가 어떻게 작동하는지 확인하십시오. 방법이 있습니까 해야합니까 빌드 내가 코드를 바꿀 때마다? define()과 비슷한 점은 requirejs ...

Answer 1

원래 나는 다음과 같은 이유 때문에이 작업을 수행 할 수 없다고 말했지만, 그럴 의도가있는 곳을 추가하고 싶습니다. 충분한 시간과 노력이 주어 졌을 때, 당신 (또는 누군가)이이 일을 성취 할 수있는 방법을 제시 할 수 있었을 것입니다. - 지금 당장 (12/12/13) 현재, 상자 도구를 사용하면 쉽게 사용할 수 있습니다.

1. browserify "모듈"은 node.js 모듈과 동일한 개념으로 작성되었습니다. 코드를 작성하고 공용 메서드/속성/etc를 module.exports 객체를 통해 내보내십시오. 브라우저의 Javascript는 기본적으로 이런 종류의 것을 지원하지 않습니다. 브라우저에서이를 용이하게하기 위해 몇 가지 상용구 템플릿 (일부 정보 here)이 있으며 브라우저와 호환 될 수 있지만 ...

2. 브라우저 코드는 구문을 분석하고 모듈은 require 메서드를 통해 사용할 수있게해야합니다. 이 require 메소드는 모듈이 필요로하는 모든 의존성에 대한 모든 코드와 함께 export 한 bundle.js에서 바로 정의된다. 이를 통해 browserify가 동 기적으로 작동하도록 require 메소드를 허용하여 모든 종류의 웹 응답 (예 : js 스크립트로드)을 기다리지 않고 즉시 요청한 모듈에 대한 참조를 반환합니다.

Require.js는 browserify와 근본적으로 다르게 작동합니다. Require.js는 참조한 define 구문을 사용하여 패키지를 정의하고 코드가 의존하는 모듈을 Require.js에 알리는 데 사용하는 require 메소드를 노출합니다. Require.js는 필요한 의존성을 찾은 다음 아직 다른 모듈에로드하지 않은 경우 새 스크립트 태그를 생성하고 브라우저가 해당 모듈을로드하도록 강제합니다. 완료 될 때까지 코드를 실행하려고 기다립니다. . 이것은 비동기 프로세스입니다. 즉, 자바 스크립트 엔진은 새 스크립트의 다운로드, 구문 분석 및 실행을 기다리는 동안 명령 처리를 계속합니다. Require.js는 일부 콜백에서이 모든 것을 래핑하므로 정의 된 코드를 실행하기 전에 모든 의존성이 충족 될 때까지 기다릴 수 있습니다 (함수를 require 및 define으로 전달하는 이유이므로 require.js는 준비 됬다).

개발을 변경할 때마다 번들을 사용하지 않는 가장 큰 이유는 반복 속도에 있습니다. 성능을 향상시키기 위해 (즉, 번들링의 속도) 수행 할 수있는 몇 가지 작업은 다음과 같습니다.

• 개발 중에 코드를 작성하지 마십시오. browserify (번들을 사용하지 않고 소스 맵으로 -d을 사용해야 함)를 번들 화하거나 축소하지 않고 번들 성능을 약간 향상시켜야한다. (더 큰 프로젝트의 경우 어쨌든).
• 모듈을 약간 분할하십시오. 서로 직접적인 종속성이없는 모듈은 동시에 빌드 할 필요가 없습니다.여러 스크립트 태그를 사용하여 응용 프로그램에 다른 모듈을 포함하거나 browserify 번들 파일을 함께 연결할 수 있습니다. 코드 변경 사항을 감시하고 코드 변경 내용이 포함 된 모듈 만 컴파일 할 수있는 무언가 작업을 절대적으로 설정할 수 있습니다. 이렇게하면 낭비되는 많은 CPU 사이클을 없앨 수 있습니다. 왜냐하면 browserify는 여러 모듈을 구문 분석하고 변형 할 필요가 없으므로 변경된 모듈 만 해석합니다. 여기에서 하나의 큰 번들로 다시 연결하거나 페이지에 포함 된 여러 번들을 사용할 수 있습니다.

Answer 2

이제는 2015 년이고 여기에는 라이브러리가 있습니다. drq입니다. 내부적으로 xhr 요청을 동기화하므로 개발 목적으로 만 적합합니다. 당신이 당신의 페이지의 모든 스크립트에서 호출을 필요로 할 수있는,

<script src="drq.js"></script> 

및 다음 : 당신은 단지 그것을 포함해야

<script> 

var myModule = require('my-module'), 
    myClass = require('./classes/my-class.js'); 

// etc. 

</script> 

그것은 당신의 웹 루트까지의 노드 모듈을 찾을 것이다

, 그래서 npm install 디렉토리보다 상위에있는 디렉토리에서 확인하십시오. 또한 성능을 향상시키기위한 팁을 찾을 수있는 GitHub page을 살펴보십시오.

다시 한번 번들이 프로덕션을위한 최적의 솔루션이라는 것을 기억하십시오.