Node CLI 개발 위 챗 애플 릿 비계 구축 예시

본문 소개 Node CLI 가 위 챗 애플 릿 비 계 를 구축 하 는 예 를 들 어 다음 과 같이 공유 합 니 다.
 
 
목적.
현재 회사 의TOC제품 은 위 챗 애플 릿 이 고 업무 가 확 대 됨 에 따라 더 많은 수요 가 있 기 때문에 더 많은 애플 릿 을 만 들 수 있 습 니 다.팀 이 개발 하기 전에 공정 화 된 일부 설정 과 모든 프로젝트 의 일치 성 을 유지 하 는 데 많은 시간 을 들 이지 않도록Node CLI위 챗 애플 릿 비 계 를 만 들 기로 결 정 했 습 니 다.

개발 초기의 많은 시간 을 절약 하고 새로운 프로젝트 는 업무 개발 을 빨리 시작 할 수 있다

프로젝트 의 통일 성 을 확보 하고 팀 간 의 협력 과 공정 화

에 유리 하 다.

팀 의 기초 건설 의식 을 향상 시 키 고 무미건조 한 업무 개발 에서 벗 어 나 새로운 것 을 시도 한다.비록 기초 가 간단 하 더 라 도

애플 릿 선택
작은 프로그램의 제3자 프레임 워 크 가 많 습 니 다.제 가 접촉 한 것 은taro/wepy/mpvue이 있 고 모두 온라인 에 대응 하 는 프로젝트 가 있 습 니 다.이러한 프레임 워 크 를 시도 하 는 과정 에서 네 이 티 브 애플 릿 과 비교 하여 공유 하고 싶 은 느낌 이 들 었 습 니 다.

제3자 프레임 워 크 문법 은 vue/react 에 가 깝 고 개발 자 는 자신의 특징 에 따라 프레임 워 크 를 선택 할 수 있 으 며 학습 원가 가 상대 적 으로 낮다

네 이 티 브 프레임 워 크 는 CSS 에서 미리 처리 하고 다 중 재 활용,상태 관리,이 몇 개의 능력 을 자동 으로 구축 하여 다른 프레임 워 크 에 비해 부족 하 다

.

제3자 프레임 의 추가 공구 꾸러미 는 포장 의 부 피 를 커지 게 하고 구축 할 때마다 시간 이 걸 리 며 성능 이 원생

보다 못 하 다.

제3자 프레임 워 크 의 갱신 이 빠르다.예 를 들 어[email protected]/wepy@2,오래된 프로젝트 의 업데이트 문제

작은 프로그램의 특성 업데이트 교체 속도 가 빠 르 고 제3자 프레임 워 크 가 상대 적 으로 정체 된다

다시 말하자면 우 리 는 현재 여러 가지 재 활용 요구 가 없고 어떤 작은 프로그램 은 상대 적 으로 간단 하기 때문에 짧 은 시간 안에 개발 하여 완성 해 야 합 니 다.가장 중요 한 것 은 다른 프레임 워 크 를 모두 해 봤 습 니 다.원생 은 아직 써 본 적 이 없습니다.한 글자,신선 함!:smile:그래서 결국 양보 하지 않 고 원생 프로그램 을 선 택 했 습 니 다.어 쩔 수 없 이 원생 대 법 이 묘 합 니 다!:clap::clap::clap::clap:
대체적인 사고 방식.
이 기능 은 상대 적 으로 매우 기본 적 인 것 이지 만 매일 벽돌 을 옮 기 는 업무 자로 서 어 려 운 과정 이자 좋 은 학습 기회 이다.
하기 전에 지역 사 회 를 찾 아 비교 하고 싶 습 니 다.ox:beer:의 학습(베 끼 기)을 한 번 하고 잠시 생각 한 후에 과감하게 선택taro-cli한 다음 에 소스 코드 를 신속하게 열 고 한 번 의 조작(완전 몽 그 라 미)을 배 운 후에 야 시작 합 니 다.
이 구체 적 인 실현 방향 은 두 가지 생각 이 듭 니 다.

git clone원 격 창 고 를 모델 로 다운로드 한 다음 에 사용자 의 입력 에 따라 설정 수정.json파일(예 를 들 어appId

template현재 디 렉 터 리 에 놓 고 바로'copy',그 후의 일 은 동일 하 다

.
저울질 한 후에lerna을 관리 도구 로 사용 하려 고 합 니 다.그 중에서 모델 도 하나의npm 로 사용 할 때npm다운로드 하 는 것 입 니 다.이렇게 하 는 것 은 제 가 관리 하기 편리 하고 통일push/publish을 위해 서 입 니 다.바로 편리 함 을 위해 서 입 니 다.smile:.
최종 사고방식:
노출 명령->사용자 상호작용 입력 설정->집합 설정 다운로드 모드->설정 에 따라 수정.json->git init+설치 의존
Node CLI 개발
Lerna 프로젝트 구축
알 고 있 는monorepo친구 들 은 내 가 더 말 할 필요 가 없다.사실은 코드 를 한 창고 에 두 었 다.그 결과 가방 간 에 회상 한 후에 번 거 로 운 문 제 를 발표 했다.여기 서 우 리 는lerna이 신기 로 우리 가 가방 의 통일 관 리 를 하 는 데 도움 을 주 었 다.

//     
mkdir modoo-mini-program
cd modoo-mini-program

//    
lerna init

cd packages
mkdir modoo-script
mkdir modoo-template-mini
mkdir modoo-mini //    modoo-script       ，       

lerna bootstrap //      + npm link

설치 의존
기능 을 실현 하기 위해 서,우 리 는 약간의 의존 패 키 지 를 설치 해 야 한다.

commander 명령 행 도 구 는 명령 파 라 메 터 를 읽 고 대응 하 는 동작 을 합 니 다

node-fs-extra 는 Node.js 의 fs 를 바탕 으로 새로운 방법 을 추 가 했 고 더 좋 으 며 템 플 릿 을 복사 할 수 있 습 니 다.

chalk 는 터미널 출력 문자열 의 스타일 을 제어 하고 색상 을 조정 하 는 데 사용 할 수 있 습 니 다

inquirer 사용자 명령 행 상호작용,사용자 의 상호작용 설정 데 이 터 를 가 져 옵 니 다.마치 질문 판

과 같 습 니 다.

ora 가 로드 중 상 태 를 실현 하 는 것 은 Loading 과 앞에서 돌 리 는 작은 동그라미 입 니 다.성공 한 것 은 Success 에 앞 에 있 는 작은 갈고리 입 니 다.

log-symbols 로그 컬러 기호,√또는× 등 아이콘

명령 가 져 오기
우선 첫 번 째 단 계 는 사용자 가 전체적으로 설치 한 후에 명령 인 터 페 이 스 를 드 러 내 려 면packages.json파일 에 다음 과 같은 내용 을 추가 해 야 합 니 다.

"bin": {
  "modoo-script": "./bin/modoo-script.js"
},

다음 루트 디 렉 터 리 에 폴 더 만 들 기bin+bin/modoo-script.js

#!/usr/bin/env node
const { program } = require("commander");

program
 .version(require("../package").version) // modoo-script --version
 .usage("<command> [options]")
 // init   ，    
 .command("init [projectName]", "Init a project with default templete")
 .parse(process.argv); //       

그 다음 에 주의해 야 할 것 은commander지원Git스타일 의 하위 명령 처 리 는 하위 명령 에 따라 특정 형식 으로 명 명 된 명령 으로 파일 을 자동 으로 유도 할 수 있 습 니 다.파일 이름 의 형식 은[command]-[subcommand]입 니 다.예 를 들 어:

modoo-script init => modoo-script-init
modoo-script build => modoo-script-build

따라서init명령 을 실현 하기 위해bin파일 디 렉 터 리 에 직접 추가 할 수 있 습 니 다modoo-script-init.js

#!/usr/bin/env node

const { program } = require("commander");

program
 .option("--name [name]", "    ")
 .option("--description [description]", "    ")
 .option("--framework", "     ")
 .parse(process.argv);

const args = program.args;
//       
const { name, description, framework } = program;

const projectName = args[0] || name;

......

사용자 상호작용
명령 파 라 메 터 를 가 져 온 후 매개 변수 에 따라 사용자 인 터 랙 션 인터페이스 로 이동 합 니 다.여기 서 사용 하 는 것 은inquirer명령 행 인 터 랙 션 을 처리 하 는 것 입 니 다.사용 방법 은 간단 합 니 다.

const inquirer = require('inquirer')

if (typeof conf.description !== 'string') {
   prompts.push({
    type: 'input',
    name: 'description',
    message: '       ！'
   })
}

......

inquirer.prompt(prompts).then(answers => {
  //     
  this.conf = Object.assign(this.conf, answers);
})

원 격 모듈
여 기 는 비교적 괴롭다.처음에 말 했 듯 이 나 는 모델 을npm 로 삼 았 다.구체 적 으로 찾 아 보면 다운로드 하 는 과정 은 다음 과 같다.

npm search해당 모델 찾기npm

사용자 가 프레임 워 크 를 선택 한 후에 필요 한 가방 을 선택 하고 상세 한 정 보 를 얻 습 니 다.주로tarball

사용자 가 입력 한 후 프로젝트 디 렉 터 리 에 다운로드tarball하고 파일 설정

을 수정 합 니 다.
부분 코드 는 그림 과 같다.

//   npm search         npm  
const { execSync } = require("child_process");

module.exports = () => {
 let list = [];
 try {
  const listJSON = execSync(
   "npm search --json --registry http://registry.npmjs.org/ @modoo/modoo-template"
  );
  list = JSON.parse(listJSON);
 } catch (error) {}

 return Promise.resolve(list);
};

//      npm   
const pkg = require("package-json");
const chalk = require("chalk");
const logSymbols = require("log-symbols");

exports.getBoilerplateMeta = framework => {
 log(
  logSymbols.info,
  chalk.cyan(`     ${framework}     ,        ...`)
 );

 return pkg(framework, {
  fullMetadata: true
 }).then(metadata => {
  const {
   dist: { tarball },
   version,
   name,
   keywords
  } = metadata;
  log(
   logSymbols.success,
   chalk.green(`      ${framework}     ,        `)
  );

  return {
   tarball,
   version,
   keywords,
   name
  };
 });
};

//      npm  
const got = require("got");
const tar = require("tar");
const ora = require("ora");

const spinner = ora(
  chalk.cyan(`     ${framework}       ...`)
).start();

const stream = await got.stream(tarball);

fs.mkdirSync(proPath);

const tarOpts = {
 strip: 1,
 C: proPath
};

//               
stream.pipe(tar.x(tarOpts)).on("close", () => {
  spinner.succeed(chalk.green("        ！"));
  ......
})

//           
const fs = require("fs-extra");

readFiles(
  proPath,
  {
   ignore: [
    ".{pandora,git,idea,vscode,DS_Store}/**/*",
    "{scripts,dist,node_modules}/**/*",
    "**/*.{png,jpg,jpeg,gif,bmp,webp}"
   ],
   gitignore: true
  },
  ({ path, content }) => {
   fs.createWriteStream(path).end(template(content, inject));
  }
 );
 
//      
exports.readFiles = (dir, options, done) => {
 if (!fs.existsSync(dir)) {
  throw new Error(`The file ${dir} does not exist.`);
 }
 if (typeof options === "function") {
  done = options;
  options = {};
 }
 options = Object.assign(
  {},
  {
   cwd: dir,
   dot: true,
   absolute: true,
   onlyFiles: true
  },
  options
 );

 const files = globby.sync("**/**", options);
 files.forEach(file => {
  done({
   path: file,
   content: fs.readFileSync(file, { encoding: "utf8" })
  });
 });
};

//     
exports.template = (content = "", inject) => {
 return content.replace(/@{([^}]+)}/gi, (m, key) => {
  return inject[key.trim()];
 });
};

다운로드 의존
다운로드 완료 및 설정 수정 후 기본 실행.json+환경git init/yarn/npm설치 의존 에 따라 간단 합 니 다.

const { exec } = require("child_process");
const ora = require("ora");
const chalk = require("chalk");

// proPath     
process.chdir(proPath);

// git init
const gitInitSpinner = ora(
 `cd ${chalk.cyan.bold(projectName)},    ${chalk.cyan.bold("git init")}`
).start();

const gitInit = exec("git init");
gitInit.on("close", code => {
 if (code === 0) {
  gitInitSpinner.color = "green";
  gitInitSpinner.succeed(gitInit.stdout.read());
 } else {
  gitInitSpinner.color = "red";
  gitInitSpinner.fail(gitInit.stderr.read());
 }
});

// install
let command = "";
if (shouldUseYarn()) {
 command = "yarn";
} else if (shouldUseCnpm()) {
 command = "cnpm install";
} else {
 command = "npm install";
}

log(" ".padEnd(2, "
"));
const installSpinner = ora(
 `         ${chalk.cyan.bold(command)},      ...`
).start();

exec(command, (error, stdout, stderr) => {
  if (error) {
   installSpinner.color = "red";
   installSpinner.fail(chalk.red("        ，       ！"));
   console.log(error);
  } else {
   installSpinner.color = "green";
   installSpinner.succeed("    ");
   log(`${stderr}${stdout}`);
  }
});

주요 코드 는 바로 이런 것 입 니 다.사실은 생각 만 알 면 이런 것들 은 모두 간단 합 니 다.제 가 쓴 것 은 약간️:chicken:이지 만 주요 한 논 리 는 잘 정리 할 수 있 습 니 다.더 자세 한 것 은 갈 수 있 습 니 다:eyes:제 가 보 낸 소스 코드 입 니 다.가르쳐 주 셔 서 감사합니다.:pray::pray::pray:
비 계 를 개발 하 다
이것 은 작은 프로그램의 비계 이기 때문에 다른cnpm프레임 처럼 많은web설정 이 필요 하지 않 기 때문에 상대 적 으로 매우 간단 하 다.
이 비계 에 대해 개발 자 도구 가 만 든 기본 항목 에 비해 저 는 이 비계 의 문제점 을 보완 하 였 습 니 다.

기본 프로젝트 는 너무 간단 해서 자신 만 괴 롭 히 기 에 적합 합 니 다.팀 이나 기업 에 대해 해당 하 는 코드 약속/규범 이 부족 하고 강제 적 인 약속 이 없 으 면 팀워크 간 의 어려움 을 초래 하고 code review 의 난이 도 를 향상 시 킬 수 있 습 니 다.그래서 저 는 원래 의 토대 에서 eslint,stylelint,prettier,commitlint 등 설정 과 git hook 이 pre-commit 에서 검 사 를 실 행 했 습 니 다.제출 한 코드 가 가능 한 한 규범화 되도록 확보

css 의 사전 처리 에 대한 사랑 으로 인해 less 에 대한 지원 을 추가 하고 애플 릿 배경 그림 이 로 컬 그림 을 지원 하지 않 는 문 제 를 해결 합 니 다

상기 기본 은 모두 파일 처리 이기 때문에 gulp 를 구축 도구 로 선택 합 니 다.여 기 는 v4 로 v3 쓰기 와 어느 정도 차이 가 있 지만 관계 가 크 지 않 습 니 다

루트 디 렉 터 리 에 만 들 기webpack

const gulp = require('gulp');
const chalk = require('chalk');
const rename = require('gulp-rename');

//    less
gulp.task('less', () => {
 return gulp
  .src('./miniprogram/**/*.less')
  .pipe(less())
  .pipe(postcss()) //     post.config.js
  .pipe(
   rename((path) => {
    path.extname = '.wxss';
   })
  )
  .pipe(
   gulp.dest((file) => {
    return file.base; //    
   })
  );
});

//        less
if (env === 'development') {
 gulp.watch(['./miniprogram/**/*.less'], gulp.series('less')).on('change', (path) => {
  log(chalk.greenBright(`File ${path} was changed`));
 });
}


//         ，        ，          
const imagemin = require('gulp-imagemin');
const cache = require('gulp-cache'); //     

gulp.task('miniimage', () => {
 return gulp
  .src('./miniprogram/**/*.{png,jpe?g,gif,svg}')
  .pipe(
   cache(
    imagemin([
     imagemin.gifsicle({ interlaced: true }),
     imagemin.mozjpeg({ quality: 75, progressive: true }),
     imagemin.optipng({ optimizationLevel: 5 }),
     imagemin.svgo({
      plugins: [{ removeViewBox: true }, { cleanupIDs: false }],
     }),
    ])
   )
  )
  .pipe(
   gulp.dest((file) => {
    return file.base; //    
   })
  );
});

다른 구체 적 인 설정 은 제 것 을 볼 수 있 습 니 다GitHub 창고 원본 코드
레 퍼 런 스
taro-cli
pandora-cli
little-bird-cli
Node CLI 를 개발 하여 위 챗 애플 릿 비 계 를 구축 하 는 예제 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Node CLI 구축 애플 릿 비 계 를 구축 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 지원 바 랍 니 다!