node npm 를 통 해 cli 명령 행 도 구 를 작성 합 니 다.

머리말
npm 플러그 인 을 쓰 고 싶다 면 명령 행 을 통 해 자신의 조작 을 간소화 하고 싶다 면 게 으 른 사람 이 라면 이 글 은 볼 만하 다.
포 주의 이전 글 은 맞 춤 형 모델 을 소 개 했 지만 이렇게 포 주 는 만족 하지 않 습 니 다.프로젝트 에서 우 리 는 페이지,논리 스타일 등 파일 을 자주 새로 만들어 야 합 니 다.매번 수 동 으로 new 하 나 를 만 든 다음 에 기본 코드 를 복사 하 는 것 이 매우 번 거 로 워 서 이 글 이 있 습 니 다.다음은 po 주 에 게 npm 명령 행 플러그 인 을 만 드 는 방법 을 보 여 드 리 겠 습 니 다.

npm 계 정 등록
npm 플러그 인 을 발표 하려 면 먼저 npm 계 정 이 있어 야 합 니 다.과정 은 빠 지지 않 습 니 다.가 시 죠.
npm 홈 페이지
계 정 이 생 긴 후에 우 리 는 npm init 를 통 해 package 프로필 을 만 들 고 당신 의 정 보 를 작성 한 후에 논리 코드 를 쓰기 시작 할 수 있 습 니 다.
작성 명령 입구
우선 프로젝트 구성 을 살 펴 보 겠 습 니 다.

.
├── bin      //    
├── README.md   //    
├── index.js   //   
├── src      //    
├── package.json //   
└── test     //    

인 스 턴 스 명령 코드 는 모두 bin 디 렉 터 리 에 쓰 여 있 습 니 다.현재 설정 파일 package 파일 에서 명령 을 사용 하여 설정 항목 bin 을 추가 합 니 다.

 "bin": {
    "xu": "./bin/xu.js"
  },

그리고 TJ 대신 이 쓴 commander 플러그 인 을 설치 합 니 다.

npm i commander --save

이 도구 가 있 으 면 우 리 는 명령 코드 를 편리 하 게 작성 할 수 있다.
xu.js

#!/usr/bin/env node

process.title = 'xu';

require('commander')
.version(require('../package').version)
.usage('<command> [options]')
.command('generate', 'generate file from a template (short-cut alias: "g")')
.parse(process.argv)


require('./xu-generate');  >>  

이 파일 은 입구 파일 로 볼 수 있 습 니 다.첫 번 째 줄 코드 는 반드시 추가 해 야 합 니 다.스 크 립 트 가 env 로 시작 되 는 이 유 는 스 크 립 트 해석 기 가 Liux 에 다른 디 렉 터 리 에 설 치 될 수 있 기 때 문 입 니 다.env 는 시스템 PATH 디 렉 터 리 에서 찾 을 수 있 습 니 다.이 동시에 env 는 일부 시스템 환경 변 수 를 규정 한다.이런 문법 은 주로 당신 의 프로그램 이 서로 다른 시스템 에서 모두 적 용 될 수 있 도록 하기 위 한 것 이다.
이 단계 에서 당신 은 자신의 npm 플러그 인 을 간단하게 테스트 할 수 있 습 니 다.

$ node ./bin/xu.js

>>>       usage。help  

commander 에 대해 서 는 작가 의 Github 에 가서 먼저 알 아 볼 수 있 습 니 다.여 기 는 매개 변수 에 대한 설명 이 아 닙 니 다.
xu-generate.js

#!/usr/bin/env node

const program = require('commander');
const chalk = require('chalk')
const xu = require('../src/generate');


/**
 * Usage.
 */

program
.command('generate')
.description('quick generate your file')
.alias('g')
.action(function(type, name){
  xu.run(type, name);
});
program.parse(process.argv);

이것 이 바로 기능 명령 입 니 다.generate 명령 을 정의 합 니 다.alias('g')는 이 명령 의 줄 임 말 입 니 다.그리고.action(function(type,name){xu.run(type,name); });함 수 를 되 돌려 줍 니 다.이 함 수 는 우리 가 이 명령 이 무엇 을 해 야 하 는 지 정의 하 는 것 입 니 다.
기능 함수 작성
./src/generate.js
이 파일 은 우리 가 입력 할 때 정 의 됩 니 다.

$ xu g

조작 한 거 야.

/**
 * Created by xushaoping on 17/10/11.
 */

const fs = require('fs-extra')
const chalk = require('chalk')
exports.run = function(type, name) {
  switch (type) {
    case 'page':
      const pageFile = './src/page/' + name + '/' + name + '.vue'
      const styleFile = './src/page/' + name + '/' + name + '.less'
      fs.pathExists(pageFile, (err, exists) => {
        if (exists) {
          console.log('this file has created')
        } else {
          fs.copy('/usr/local/lib/node_modules/vue-xu-generate/src/template/page.vue', pageFile, err => {
            if (err) return console.error(err)
        
            console.log(pageFile + ' has created')
          })
          fs.copy('/usr/local/lib/node_modules/vue-xu-generate/src/template/page.less', styleFile, err => {
            if (err) return console.error(err)
        
            console.log(styleFile + ' has created')
          })
        }
      })
      break;
    case 'component':
      const componentFile = './src/components/' + name + '.vue'
      fs.pathExists(componentFile, (err, exists) => {
        if (exists) {
          console.log('this file has created')
        } else {
          fs.copy('/usr/local/lib/node_modules/vue-xu-generate/src/template/component.vue', componentFile, err => {
            if (err) return console.error(err)
          
            console.log(componentFile + ' has created')
          })
        }
      })
      break;
    case 'store':
      const storeFile = './src/store/modules' + name + '.js'
      fs.pathExists(storeFile, (err, exists) => {
        if (exists) {
          console.log('this file has created')
        } else {
          fs.copy('/usr/local/lib/node_modules/vue-xu-generate/src/template/store.js', storeFile, err => {
            if (err) return console.error(err)
          
            console.log(storeFile + ' has created')
          })
        }
      })
      break;
    default:
      console.log(chalk.red(`ERROR: uncaught type , you should input like $ xu g page demo` ))
      console.log()
      console.log(' Examples:')
      console.log()
      console.log(chalk.gray('  # create a new page'))
      console.log('  $ xu g page product')
      console.log()
      console.log(chalk.gray('  # create a new component'))
      console.log('  $ xu g component product')
      console.log()
      console.log(chalk.gray('  # create a new store'))
      console.log('  $ xu g store product')
      console.log()
      break;
  }
};

명령 출력 색상 과 파일 작업 플러그 인 으로 npm 를 통 해 설 치 된 두 개의 새로운 의존 도가 있 습 니 다.

$ npm i fs-extra --save

$ npm i chalk --save

이 js 파일 은 xu-generate.js 에 run 함 수 를 내 보 냈 습 니 다.우 리 는 매개 변 수 를 통 해 사용자 가 입력 한 type,name 을 가 져 온 다음 type 에 따라 node fs 모듈(여기 서 의존 하지만 원 리 는 fs)작업 을 통 해 template 파일 을 프로젝트 에 복사 할 수 있 습 니 다.
여기까지 우 리 는 프로젝트 의 모드 파일 을 빠르게 생 성 할 수 있 는 명령 개발 을 마 쳤 다.
로 컬 테스트
npm 패키지 개발 은 웹 개발 과 달리 브 라 우 저 에서 직접 볼 수 있 습 니 다.인 스 턴 스 디 렉 터 리 에 test 파일 을 만 들 고 node test 를 사용 하면 우리 의 논 리 를 테스트 할 수 있 습 니 다.발표 후에 야 측정 할 수 있 는 기능 이 있다 면 npm 는 로 컬 모듈 에 연결 할 수 있 는 링크 명령 이 있 습 니 다.물론 발표 후에 플러그 인 테스트 를 설치 할 수도 있 습 니 다.평소 플러그 인 을 도입 하 는 것 과 같 습 니 다.
npm 패키지 발표
우선 프로젝트 루트 디 렉 터 리 에서 npm 로그 인 을 실행 합 니 다.

$ npm login 

$ npm publish

만약 여기에 잘못된 보고 가 있다 면,아마도 당신 이 cnpm 주 소 를 사 용 했 을 것 입 니 다.npm 창 고 를 설정 해 야 합 니 다.

 $ npm config set registry https://registry.npmjs.org/

그리고 npm 패 키 지 를 업데이트 하려 면 버 전 번호 가 이전 보다 커 야 합 니 다.
후기
이로써 입문 급 npm 가방 하나 가 완성 되 었 습 니 다.감개 무량 합 니 다.처음 문 앞 에 들 어 갔 을 때 다른 사람의 플러그 인 이 만 든 진짜 소 를 본 것 을 기억 합 니 다.자신 이 간단하게 설치 하면 그렇게 예 쁘 게 만 들 수 있 습 니 다.하고 싶 었 습 니 다.하지만 낯 선 것 을 보고 바로 겁 을 먹 었 습 니 다.(node 환경,물건 이 매우 많 습 니 다.vue-cli 를 직접 복사 해서 코드 한 쌍 을 보고 안개 가 끼 었 습 니 다.큰 소 무시 하 세 요)
공 부 는 순서에 따라 점진 적 인 과정 이다.큰 소 가 쓴 것 은 일정한 기초 가 없고 장시간 의 경험 을 쌓 으 며 소스 코드 는 배우 기 어렵다.굳이 뜯 어 먹 어도 되 지만 효율 감 은 차근차근 하 는 것 보다 못 하 다.
플러그 인 이 발표 되 었 습 니 다.Github 에 도 완전한 소스 코드 가 있 습 니 다.배우 고 싶 은 친구 들 은 fork 혼자 놀 수 있 습 니 다.이 줄 을 하 는 것 이 마음 에 드 는 대로 흥 미 를 따라 갈 수 있 습 니 다.틀림 없습니다.
전송 문:npm 주소
전송 문:github 소스 코드
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.