내 첫 npm 패키지 만들기

현재 저는 12년 동안 웹 개발자를 했습니다. 제 일상적인 업무와 보조 프로젝트에서 저는 매일 이렇게 많은 npm 패키지를 사용했지만 저는 이전에 자신의 npm 패키지를 만든 적이 없습니다.나는 그것이 무엇인지, 그리고 어떻게 자신의 가방을 만들어서 npm에 배치하는지 보기로 결정했다.

생각

저는 Bulma 프런트엔드 프레임워크를 사용하여 사용자 인터페이스를 구축하는 것을 좋아합니다.그것은 사용이 간단하고 응답이 빠르며 많은sass 변수가 있어서 사용자가 쉽게 맞춤형 디자인을 할 수 있습니다.최근의 한 항목에서, 나는 간단한 css를 작성하여 블록 스타일 목록을 만들어서 항목 기호 목록보다 더욱 돋보이게 했다.
간단한 패키지를 만들어서 블록 스타일 목록을 쉽게 만들 수 있지만, Bulma-sass 변수를 사용해서 사용자 정의를 할 수 있다는 아이디어를 주었습니다.

소포json

조금 읽은 후에 나는 새 폴더를 만들어서 그 폴더로 바꾸고 실행하기 시작했다 npm init.이것은 내가 가방을 만드는 과정을 완성하도록 인도한다.이름, 버전, 키워드, 허가증을 포함한 json 파일입니다.
그리고 나서 나는 더 많은 연구를 해서 가방에 홈페이지와 버그 라벨을 추가하는 것이 좋은 생각이라는 것을 발견했다.json, 특히 가방을 npm에 발표하려면이것은 사용자가 직접 GitHub의 repo로 이동하여 코드를 보고 문제 로그를 볼 수 있도록 합니다.GitHub에서 새로운 리셋 프로토콜을 만들었고 홈페이지와 버그 부분을 업데이트해서 새로 만든 리셋 프로토콜을 가리켰습니다.
마지막으로 나는 작가의 상세한 정보를 추가하여 개발을 시작할 준비를 했다.npm에서 주의해야 할 점은 대중을 위한 전자 우편 주소가 필요하다는 것이다.

SCS 작성

원본 코드를 포함하는 src 디렉터리와 컴파일된 코드를 포함하는dist 디렉터리를 만드는 것이 표준적인 방법인 것 같습니다.나의 예에서, 나는 차단 목록을 만들었다.src 디렉터리의 scss 파일과 차단 목록입니다.dist 디렉터리의 css 파일 (scss 파일에서 컴파일) 입니다.
Bulma에 대해 연구를 한 후에 나는 내 자신의 저지 목록에서sass 변수를 사용할 수 있는 방법이 필요하다는 것을 깨달았다.scss 파일.다행히도, documentation 중 한 절은 사용자정의에 대한 모든 정보를 알려 줍니다. 노드sass를 사용하기 시작하는 정보를 포함합니다.

npm install node-sass --save-dev
npm install bulma --save-dev

우선 설명에 따라 Bulma와 node-sass를 새 패키지의 개발 의존 항목에 추가하고 제공된 스크립트 부분을 패키지에 복사합니다.json은 나의 수요를 만족시키기 위해 그것을 맞춤형으로 만든다.이것은 나에게 scss 파일을 css 파일로 쉽게 컴파일하는 방법을 제공했다.

"scripts": {
  "css-build": "node-sass --omit-source-map-url src/block-list.scss dist/block-list.css",
  "css-watch": "npm run css-build -- --watch",
  "start": "npm run css-watch"
}

나는 Bulma 전체를 내 가방에 가져오고 싶지 않기 때문에, 나는 네가 필요로 하는 것만 가져오는 부분에 대해 계속 읽었다.

// Import only what you need from Bulma
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";

확장이 필요한 Bulma 변수를 사용할 수 있도록 utilities/_all.sass 및 base/_all.sass 파일을 scss 파일에 가져옵니다.
나는 나의 것을 만들었다.그리고 npm start scss 파일을 css 파일로 컴파일합니다.

프레젠테이션 페이지 만들기

나는 목록을 막을 가능성을 보여 주고 싶어서 html 페이지를 만들었다.나는 그것을 디스트 폴더에 두었다. 이렇게 하면 나는 차단 목록을 쉽게 사용할 수 있다.방금 만든 css 파일입니다.
나는 Bulma 기둥을 사용하여 정렬, 크기, 색깔, 윤곽, 원각의 가능성을 보여 주는 간단한 레이아웃을 만들었다.
프레젠테이션 페이지를 구축하고 scss 파일을 완성한 후에 지금까지 제가 한 일을 제출하고 GitHub로 보내기로 했습니다.나는 GitHub 페이지를 사용하여 나의 다른 프로젝트와 나의 사이트를 위해 프로젝트 페이지를 위탁 관리하지만, 나는 이미 한동안 프로젝트 페이지를 만들지 않았다.GitHub 페이지를 사용하여 프레젠테이션 페이지를 만드는 것에 관해서 나는 색인을 깨달았다.html 페이지는 디렉터리의 루트 디렉터리나 docs 디렉터리에 있어야 합니다.
docs 디렉터리를 사용하기로 결정했습니다. 그래서 dist 디렉터리를 docs로 바꾸고 GitHub로 되돌려 보내고 eGitHub 페이지를 docs 디렉터리에서 구축하도록 설정합니다.
dist 디렉터리가 없으면 관례를 깨뜨릴 수 있지만, 컴파일된 css는 패키지 사용자에게 아무런 소용이 없다고 생각합니다. 기본 Bulma 변수를 덮어쓸 수 없기 때문입니다.
어쨌든, demo page 현재 시작하여 운행하고 있습니다.

자술 파일 만들기

나는 입문에 대한 기본 설명을 포함하고 프레젠테이션 페이지를 가리키는 링크를 추가해서 더 많은 지도를 받았다.설명서에는 npm에 대한 내용이 포함되지 않았습니다. 왜냐하면 npm에 발표되지 않았기 때문입니다.

npm에 게시

npm에 발표하기 전에 계정을 만들어야 합니다.나는 NPMJ를 참관했다.무료 계좌를 등록했습니다.다음은 구글에서 첫 번째 npm 패키지를 만드는 방법을 검색하고 팝업에 연결했습니다.

첫 번째 npm 패키지 만들기

단 비가・ 2019년 2월 12일・ 7분 읽기

#node #npm #javascript

나는 이 글을 통독하고'NPM 패키지 발표'라는 절을 찾았는데, 그것은 나에게 해야 할 모든 것을 알려주었다.나는 나의 단말기를 되돌려주고 실행한다npm adduser.나는 계속해서 나의 새 npm 계정으로 로그인하고 나머지는 실행npm publish이다.
몇 초 후, 나의 소프트웨어 패키지는 published on npm이고, 지금은 사용할 수 있다.
나는 컴퓨터에 새 폴더를 만들어서 실행npm init하고 테스트 정보를 작성한 후에 실행npm i -S bulma-block-list하여 나의 새 소프트웨어 패키지를 테스트했다.패키지가 다운로드되어 node\u modules 디렉토리에서 찾을 수 있습니다.

새로운 버전의 변경 및 추진

이 점에서 나는 npm의 설명을 포함하여 자술한 파일을 업데이트해야 할지도 모른다는 것을 깨달았다.자술한 파일을 업데이트하여git의 변경 사항을 제출하고 GitHub로 전송했습니다.변경 사항은 GitHub에 나타나지만 npm 페이지에는 없습니다.
그리고 npmpublish를 실행하여 npm의 자술 파일을 업데이트하려고 했지만 403 오류로 되돌아왔습니다. "전에 발표된 0.1.0 버전을 발표할 수 없습니다."
자술한 파일의 주 분기 버전을 표시하는 GitHub와 달리 npm 업데이트는 GitHub의 버전과 태그처럼 버전이 있습니다.
지금 나는 이것이 매우 일리가 있다고 생각한다.나는 가방에서 버전을 0.1.1로 업데이트했다.json 파일, GitHub로 밀어넣고 다시 실행합니다npm publish.이번에는 오류가 발생하지 않았습니다. 새 버전은 예상대로 발표되었습니다.자술한 파일은 현재 GitHub와 npm에서 모두 정확합니다.

학습 곡선

다년간의 경험이 있어도 새로운 일을 할 때마다 약간의 학습 곡선이 있다.나는 npm와 소프트웨어 패키지의 다른 부분을 읽는 데 더 많은 시간을 들일 것이다.json.저는 보통 일상적인 사용에서만 제목, 스크립트, 의존항, 개발 의존항을 사용하지만, 홈페이지, 버그, 저자 등 더 많은 부분을 추가할 수 있습니다.소프트웨어 패키지의 가시성을 높이기 위해 최상의 키워드를 추가하는 데는 아직 배워야 할 점이 많을 것이다.
만약 당신이 어떤 힌트가 있다면, 저나 다른 사람을 미래에 도와줄 것입니다. 그러면 아래의 평론에 추가하세요!