Npm은 CLI 명령줄 도구를 만듭니다.-JS 튜토리얼-php.cn

이번에는 cli 명령줄 도구인 Npm을 소개하겠습니다. cli 명령줄 도구인 Npm에 대한 주의 사항은 무엇입니까?

머리말

npm 플러그인을 작성하고 싶거나 명령줄을 통해 작업을 단순화하고 싶거나 게으른 사람이라면 이 기사를 읽어 볼 가치가 있습니다.

PO 소유자의 이전 기사에서는 자신만의 템플릿을 사용자 정의하는 방법을 소개했지만, PO 소유자는 여전히 이에 만족하지 않습니다. 프로젝트에서는 매번 수동으로 새 페이지, 논리 스타일 및 기타 파일을 생성해야 하는 경우가 많습니다. 새로 만들고 몇 가지 기본 코드를 복사하는 것이 매우 번거로워서 이 글을 작성했습니다. 다음으로, po 마스터가 npm 명령줄 플러그인을 만드는 방법을 단계별로 보여드리겠습니다.

npm 계정 등록

npm 플러그인을 게시하려면 먼저 npm 계정이 있어야 합니다. 이 과정은 오래 걸리지 않습니다.

npm 공식 홈페이지

계정이 있으면 npm init를 통해 패키지구성 파일을 생성하고 일부 정보를 입력한 다음 논리 코드 작성을 시작할 수 있습니다.

쓰기 명령 입력

먼저 프로젝트 구조를 살펴보세요

.
├── bin      //命令配置
├── README.md   //说明文档
├── index.js   //主入口
├── src      //功能文件
├── package.json //包信息
└── test     //测试用例

로그인 후 복사

예제 명령 코드는 모두 bin 디렉터리에 작성되었습니다. 이제 구성 파일 패키지 파일에서 명령을 활성화하고 구성 항목 bin

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

로그인 후 복사

을 추가합니다. 그런 다음 TJ가 작성한 명령 플러그인인

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로 시작되는 이유는 스크립트 해석기가 Linux env의 다른 디렉터리에 설치될 수 있기 때문입니다. 시스템의 디렉토리에서 찾으십시오. 동시에 env는 일부 시스템 환경 변수도 규정합니다. 이 작성 방법은 주로 프로그램을 다른 시스템에 적용할 수 있도록 하는 것입니다.

이 단계에서는 자신의 npm 플러그인을 간단히 테스트할 수 있습니다

$ node ./bin/xu.js
>>> 输出一些插件usage。help信息

로그인 후 복사

지휘관에 관해서는 저자의 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);

로그인 후 복사

이것은 생성 명령을 정의하는 함수 명령이며, .alias('g')는 명령의 약어이고, .action(function(type, name){xu.run(type, name); }); 함수를 반환합니다. 이 함수는 이 명령을 정의하기 위해 수행해야 하는 작업입니다.

함수 작성

./src/generate.js

이 파일은

$ xu g

로그인 후 복사

를 입력하는 시점을 정의합니다. 수술이 완료되었습니다.

rreee

여기에는 npm을 통해 설치된 명령 출력 색상과 파일 작업 플러그인이라는 두 가지 새로운 종속성이 있습니다.

rreee

이 js 파일은 xu-generate.js가 호출할 실행 함수를 내보냅니다. 매개변수를 통해 사용자가 입력한 유형과 이름을 얻은 다음 노드 fs 모듈을 통해 유형에 따라 작동할 수 있습니다(여기서는 종속성이 사용됩니다). , 그러나 원칙은 여전히 fs입니다. 템플릿 파일을 프로젝트에 복사합니다.

이로써 프로젝트의 템플릿 파일을 빠르게 생성할 수 있는 명령어 개발이 완료되었습니다.

로컬 테스트

npm 패키지 개발은 웹 개발과 달리 브라우저에서 직접 확인하고 인스턴스 디렉터리에 테스트 파일을 생성한 후 노드 테스트를 할 수 있습니다. 우리의 논리를 테스트하기 위해서입니다. 게시 후 테스트해야 할 기능이 있는 경우 npm에는 로컬 모듈에 연결할 수 있는 링크 명령이 있습니다. 물론 게시 후에도 가능합니다. 플러그인 테스트를 직접 설치하는 것은 플러그인을 소개하는 것과 같습니다.

npm 패키지 게시

먼저 프로젝트 루트 디렉터리에서 npm login을 실행하세요

/**
 * 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;
  }
};

로그인 후 복사

여기에 오류가 있다면 cnpm 주소를 사용했기 때문일 수 있으며 npm 창고를 다시 설정해야 합니다

$ npm i fs-extra --save
$ npm i chalk --save

로그인 후 복사

그런 다음 npm 패키지를 업데이트하면 버전 번호가 마지막보다 커야 합니다

후기

이 시점에서 보급형 npm 패키지가 완성되었습니다. 처음 프론트엔드 작업을 시작했을 때 다른 분들의 플러그인이 정말 좋은 걸 보고 간단하게 설치만 하면 너무 멋있게 만들어지고 싶었던 기억이 나네요~ 생소한거 잔뜩 보고 바로 낙담했습니다. (노드환경, 이것저것 많아요. vue-cli 복사해서 코드 몇개 봤습니다. 똑똑하신 분들은 무시해주세요.)

학습은 단계별 과정입니다. 확실한 기초와 장기간 축적된 경험이 없으면 소스 코드를 배우기가 어렵습니다. 꼭꼭 씹어야 한다면 괜찮지만, 단계별로 씹어먹는 것만큼 효율이 좋은 느낌은 아니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!