Node.js
Browserfiy를 사용하여 브라우저에서 '필수'오류를 해결합니다.

예 - file.js

이 예제에서 우리는 file.js 라는 파일을 가지고있다.

JavaScript와 NodeJS 쿼리 문자열 모듈을 사용하여 URL을 구문 분석해야한다고 가정 해 보겠습니다.

이 작업을 수행하려면 파일에 다음 명령문을 삽입해야합니다.

const querystring = require('querystring'); 
var ref = querystring.parse("foo=bar&abc=xyz&abc=123");

이 스 니펫은 무엇을하고 있습니까?

첫째, URL 쿼리 문자열을 구문 분석하고 형식을 지정하는 유틸리티를 제공하는 쿼리 문자열 모듈을 만듭니다. 다음을 사용하여 액세스 할 수 있습니다.

const querystring = require('querystring'); 

그런 다음 .parse () 메소드를 사용하여 URL을 구문 분석합니다. URL 쿼리 문자열 (str)을 키 및 값 쌍의 모음으로 구문 분석합니다.

예를 들어 쿼리 문자열 'foo=bar&abc=xyz&abc=123' 은 다음과 같이 구문 분석됩니다.

{  foo: 'bar',  abc: ['xyz', '123']   }

안타깝게도 브라우저에는 require 메소드가 정의되어 있지 않지만 Node.js는 정의되어 있습니다.

브라우저 설치

Browserify를 사용하면 Node에서 사용하는 것과 동일한 방법으로 require 를 사용 하는 코드를 작성할 수 있습니다. 그래서, 어떻게 이것을 해결합니까? 간단 해.

1. npm과 함께 제공되는 첫 번째 설치 노드. 그럼 :

npm install -g browserify

2. file.js가있는 디렉토리로 변경하고 npm을 사용하여 querystring 모듈을 설치하십시오.

npm은 querystring을 설치합니다.

주 : 특정 디렉토리에서 변경하지 않으면 모듈이 들어있는 파일을 찾을 수 없기 때문에 명령이 실패합니다.

3. 이제 file.js에서 시작하는 모든 필수 모듈을 bundleify.js라는 단일 파일 (또는 이름을 짓고 싶은 파일)에 browserify 명령을 사용하여 번들로 묶습니다.

browserify file.js -o bundle.js

Browserify는 require () 호출에 대한 추상 구문 트리를 구문 분석하여 사용자의 전체 종속성 그래프를 탐색합니다.

4. Finally HTML을 하나의 태그를 끕니다 그리고 다 끝났어!

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

무슨 일이 생기면 기존 .js 파일 ( file.js 그대로)과 새로 생성 된 bundle.js 파일의 조합을 얻을 수 있습니다. 이 두 파일은 하나의 단일 파일로 병합됩니다.

중대한

file.js를 변경하려는 경우 프로그램의 동작에 영향을 미치지 않으므로 유의하십시오. 새로 변경된 bundle.js를 수정하면 변경 사항이 적용됩니다.

그게 무슨 뜻 이죠?

즉, 어떤 이유로 든 file.js 를 편집하려는 경우 변경 사항이 적용되지 않습니다. 당신은 정말 bundle.js 및 file.js의 병합이기 때문에 bundle.js을 편집 할 수 있습니다.