안녕하세요 여러분, 어떤 작업을 하던 중 코드 참조가 작동하지 않는 문제가 발생했습니다. npm 모듈 웹에서 직접. CDN 버전은 있지만 지원하는 모든 것이 있는 것은 아닙니다. 그럼 무엇을 할 수 있을까요?
NPM 모듈은 대부분 node.js 시스템을 위해 빌드되었으며, 모든 모듈 내에서 사용되는 다른 종속성 때문에 브라우저에서 직접 작동하지 않을 수 있습니다. 그런 경우 해당 스크립트를 사용하기 어려워집니다. 따라서 종속성에 대해 걱정하지 않고 웹에서 모든 NPM 모듈을 사용하는 더 나은 방법이 있습니다.
Browserify와 함께 Npm 모듈 사용
그래서 방법을 찾던 중 마침내 그 방법을 찾았습니다.
이 접근 방식의 기본 아이디어
- npm 패키지를 설치하기 위한 package.json을 제공하는 NPM으로 프로젝트를 생성하는 것입니다.
- Buffer와 같이 원하는 모든 종속성을 추가하세요.
- 웹 스크립트에서 모듈을 호출하는 데 사용될 창 객체에 할당합니다.
- 나중에 내보낼 JS 번들을 생성합니다.
- 귀하의 편의성과 요구 사항에 따라 동일한 폴더 또는 CDN을 통해 로컬로 제공
이제 아이디어가 생겼습니다. 이걸 어떻게 하는지 봅시다.
Browserify NPM을 사용하여 JS 번들을 만드는 단계
1. Npm 패키지를 전역적으로 설치합니다.
터미널에 아래 명령을 입력하세요.
npm i -g browserify
2. 폴더를 생성하고 NPM 프로젝트를 초기화합니다.
디렉토리를 생성하고 디렉토리로 이동합니다.
터미널에 명령을 입력하세요
mkdir example cd example npm init -y
이렇게 하면 종속성을 추가할 수 있는 npm 프로젝트가 생성됩니다.
3. 예를 들어 npm 패키지를 추가해 보겠습니다.
우리가 ~을 가져야 한다고 가정해 보자. 완충기 패키지를 설치하고 파일 업로드 중에 변환하는 데 사용합니다.
그런 다음 명령을 통해 추가합니다.
npm install buffer
4. 필요한 npm 모듈을 가져오기 위한 파일을 만듭니다.
파일 이름은 무엇이든 지정할 수 있습니다. 예를 들어 다음과 같은 이름으로 파일을 생성한다고 가정해 보겠습니다. 메인.js 그리고 같은 파일에 모듈을 가져옵니다. 그런 다음 해당 변수를 다음에 할당해야 합니다. 창문 브라우저에서 전역적으로 사용할 수 있는 객체입니다. 창 객체는 브라우저에서 전역적으로 사용할 수 있으므로 모듈을 호출하기만 하면 됩니다. 창 모듈 main.js 파일에서 지정한 모듈 이름을 호출하는 구문입니다.
명령을 입력하세요
touch main.js
편집기에서 열거나 편집할 수도 있습니다.nano터미널의 편집기
nano main.js
다음 코드를 붙여넣으세요main.js파일
// Here we import the module we need
const Buffer = require('buffer').Buffer;
// here we assign the imported module to use in the window later.
window.Buffer = Buffer;
그런 다음 파일을 저장합니다.
5. npm 모듈을 하나로 묶어서 내보내기 위한 브라우저 번들을 생성합니다.
이제 이 파일을 정적 JS 스크립트로 변환해야 합니다. 그러면 NPM 모듈에서 모든 코드를 가져와 로컬 브라우저나 CDN을 사용하여 작동하는 간단한 스크립트가 됩니다.
터미널에 다음 명령을 입력하세요.
browserify main.js -o example.js
여기서 main.js는 우리의 임포트가 있는 파일이고 example.js는 출력 파일입니다. 원하는 대로 이름을 지을 수 있습니다.
6. 번들을 프로젝트로 가져오기
이제 이 파일을 index.html이라는 이름으로 루트나 아무 폴더에나 복사하세요.
index.html과 example.js 파일이 같은 폴더에 있다고 가정해 보겠습니다. 그러면 가져오기 위해 스크립트 태그를 포함하고 코드를 사용할 수 있습니다. 이 방법에서는 버퍼 모듈을 쉽게 가져올 수 있습니다.
<script src="./example.js"></script>
<script>
async function someMethod() {
const res = window.Buffer.from('somestring');
}
</script>
이제 브라우저에서 웹 프로젝트나 간단한 HTML + JS 프로젝트에서 NPM 모듈을 활용하는 방법을 알아보겠습니다.
우리는 이런 팁을 더 자주 공유할 것입니다.
읽어주셔서 감사합니다.
또한 Hive, Blurt, Serey와 같은 다양한 암호화 플랫폼에서도 이러한 게시물을 공유합니다.
브라우저에서 Browserify와 함께 NPM 모듈을 사용하는 방법이라는 게시물이 Tekraze에 처음 게재되었습니다.
