브라우저에서 직접 npm 패키지를 테스트하고 싶다면 이를 수행할 수 있는 방법이 있습니다!

어떻게?

요령은 개발자 콘솔에서 프로그래밍 방식으로 자바스크립트 파일을 로드하는 것입니다.

const script = document.createElement('script');
script.src = 'localhost:666/bundle.js';
document.body.appendChild(script);

bundle.js는 무엇입니까?

그것은 browserify 로 잠시 후에 생성할 번들입니다.

그리고 localhost:666/은 무엇입니까?

크롬 브라우저는 로컬 파일 로드를 허용하지 않기 때문에 이 서버는 사용자가 제공할 로컬 서버입니다(이 자습서의 뒷부분에서).

건물을 시작하자

cheerio를 원하는 npm 패키지로 교체할 수 있습니다(그러나 모든 패키지가 브라우저에서 작동하지는 않음).

새 디렉터리 열기

npm init -y

npm i -D browserify http-server (개발 종속성으로)

npm i cheerio (또는 사용하려는 패키지)

touch main.js

code . (시각 코드 스튜디오 시작)

main.js에서 다음을 편집합니다.

const cheerio = require("cheerio");
window.cheerio = cheerio; // this makes it available in the console later

package.json에 다음을 추가합니다.

"scripts": {
    "serve": "browserify main.js -o build/bundle.js && http-server -p 666 build/"
  },

npm run build

브라우저 열기

이것이 로드되는지 확인: localhost:666/bundle.js

그렇다면 Chrome의 개발자 콘솔(모든 페이지)에 복사하여 붙여넣으십시오.

const script = document.createElement('script');
script.src = 'localhost:666/bundle.js';
document.body.appendChild(script);

이제 개발자 콘솔에서 npm 패키지를 사용해 보십시오. 이 경우에는 다음과 같습니다.

const $ = cheerio.load(document.body.innerHTML);
$('a');

추신: 모든 npm 패키지가 작동하는 것은 아닙니다. 시도했지만request 개발자 콘솔에서 오류가 발생했습니다. 그러나 요즘에는 이를 위해 새로운 표준fetch을 사용하는 것이 좋습니다.

Github: You can clone this repo also!