Node.js를 사용하여 CLI 스캐폴딩을 작성하는 방법

프런트 엔드 스캐폴딩이란 무엇입니까?

먼저 Baidu Encyclopedia에서 "비계"의 정의를 확인해 보겠습니다.

비계는 각 건설 과정의 원활한 진행을 보장하기 위해 세워진 작업 플랫폼입니다.

프론트엔드 엔지니어링의 개념이 점점 대중화되면서 프론트엔드 스캐폴딩이 등장하게 되었습니다.

간단히 말해서 "프론트엔드 스캐폴딩"은 몇 가지 옵션을 선택하여 프로젝트의 기본 코드를 빠르게 구축하는 도구를 의미하며, ctrl + C 및 ctrl + V의 동일한 코드 프레임워크와 기본 구성을 효과적으로 피할 수 있습니다.

배경

새로운 프로젝트를 개발할 준비가 되면:

단기간 내에 완전한 프로젝트 기본 환경(완전한 기술 스택, 풍부한 보조 기능, 다양한 환경 고려)을 구축하는 것은 상대적으로 어렵습니다.
다양한 프로젝트 요구 사항과 팀 상황으로 인해 기본 프로젝트 환경을 구축할 때 정적인 상태를 유지할 수 없습니다.

프런트엔드 스캐폴딩 도구:

프로젝트의 기본 코드를 빠르게 생성하는 데 도움이 됩니다.
스캐폴딩 도구의 프로젝트 템플릿은 개발자에 의해 개선되고 테스트되었으며 특정 유형의 프로젝트에 대한 모범 사례를 어느 정도 나타냅니다.
스캐폴딩 도구는 다양한 프로젝트에 따라 "사용자 정의"할 수 있는 사용자 정의 템플릿의 사용을 지원합니다.

요약하자면, 스캐폴딩은 반복적인 작업을 줄이고 반복적인 작업을 수행할 수 있도록 도와주는 도구입니다.

상대적으로 안정적이고 뛰어난 프런트 엔드 비계 "비계"에는 다음 범주가 포함됩니다.

Vue/React 스캐폴딩
Node와 yeoman을 사용하여 나만의 비계 구축
처음부터 웹팩 스캐폴딩 구축

Vue 스캐폴딩이란 무엇입니까?

Vue CLI는 Vue.js 기반의 신속한 개발을 위한 완벽한 시스템입니다.
저자는 대부분의 개발 환경을 구성하는 데 도움을 주었고, 이러한 도구 환경 구축에 대해 생각할 필요 없이 스캐폴딩을 다운로드하여 직접 개발할 수 있습니다.

이 새 패키지는 다음 명령 중 하나를 사용하여 설치할 수 있습니다.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

다음 명령을 실행하여 새 프로젝트를 만듭니다.

vue create kk-test

사전 설정을 선택하라는 메시지가 표시됩니다. 기본 Babel + ESLint 설정이 포함된 기본 사전 설정을 선택하거나 "수동으로 기능 선택"을 선택하여 필요한 기능을 선택할 수 있습니다.
기본 디렉토리

생성된 코드 디렉토리는 다음과 같습니다:
[외부 링크 이미지 전송에 실패했습니다. 소스 사이트에 리칭 방지 메커니즘이 있을 수 있습니다. 이미지를 저장하고 직접 업로드하는 것이 좋습니다(img-sl7XXtHE-1687761801189) (…/images/ kk-테스트-카탈로그.png)]

이 기본 설정은 새 프로젝트의 프로토타입을 빠르게 만드는 데 유용하며, 수동 설정은 생산 중심 프로젝트에 더 필요한 옵션을 더 많이 제공합니다.

이제 자체 스캐폴딩 도구를 작성하기 위해 any-cli를 예로 들어 보겠습니다.

핵심 원칙

yoeman프로젝트 구축에 필요합니다 yoeman-generator. yoeman-generator이는 본질적으로 완전한 파일 구조를 갖춘 템플릿으로, 사용자는 이러한 템플릿을 로컬 영역에 수동으로 다운로드해야 하며, 그러면 yoeman이러한 템플릿을 기반으로 다양한 프로젝트가 자동으로 생성됩니다.

vue-cli는 상당히 다양한 옵션과 설정 기능을 제공하지만 그 핵심은 "로컬에서 생성된" 일부 블랙 기술이 아닌 원격 창고에서 로컬로 다양한 템플릿을 가져오는 것입니다.

이러한 관점에서 보면 먼저 다른 템플릿을 만든 다음 스캐폴딩이 템플릿을 참조하여 사용자의 지시에 따라 실제 프로젝트를 생성한다는 아이디어가 있습니다.

템플릿은 스캐폴딩에 구축되거나 원격 창고에 배포될 수 있습니다.

스캐폴딩에 내장되어 node file작업을 사용하여 템플릿을 로컬로 복제합니다.

템플릿을 저장하기 위해 새 창고를 만들 필요가 없다는 장점이 있습니다. 특히 여러 프로젝트 템플릿이 있는 경우, 예를 들어 두 개의 서로 다른 프로젝트를 별도로 생성하는 대신 init pc비계 init mobile를 보관할 창고 하나만 있으면 됩니다.

두 번째 장점: 스캐폴딩이나 템플릿 변경에 관계없이 한 번만 제출하면 됩니다.
원격 웨어하우스에 배포하고 git clone프로젝트를 로컬로 복제합니다.

장점은 템플릿의 코드가 변경될 때마다 사용자가 로컬에서 스캐폴딩을 업그레이드할 필요가 없다는 것입니다.

템플릿이 비계에 내장된 경우 템플릿이 변경될 때마다 동일한 창고에 있으므로 사용자는 비계를 업그레이드해야 합니다. 원격 웨어하우스에 배포할 때는 다르며 최신 템플릿을 얻으려면 git clone만 필요합니다.

전반적인 과정

표준 관행에 따라 먼저 전반적인 프로세스를 살펴 보겠습니다.

添加模板->输入模板名->是否有重名模板?-添加成功:给出提示

删除模板->输入模板名->是否有模板?-删除成功:给出提示

模板列表->列出所有模板

初始化模板-输入模板名-是否有模板?-输入模块名-克隆远程仓库到本地模块-切换分支:给出提示

기술적인 포인트

process.cwd()与__dirname

명령은 스캐폴딩에 위치하며, 명령이 실행되는 위치는 템플릿 프로젝트인 경우가 많습니다.

예를 들어 스캐폴딩 경로는 이고 D:\Documents\Downloads\any-cli\src\command, 글로벌 스캐폴딩 명령을 실행하는 경로는 입니다 C:\Users\Administrator.

예를 들어, 스캐폴딩 코드는 스캐폴딩 디렉터리의 a.js파일을 읽고 이를 템플릿 프로젝트(전역 스캐폴딩 명령이 실행되는 위치)에 쓰려고 합니다 b.js.

그런 다음 readFile의 경로는 다음과 같습니다 path.resolve(__dirname,'a.js').

writeFile 경로는 입니다 path.resolve(process.cwd(),'b.js').

process.cwd(): 현재 Node.js 프로세스가 실행될 때의 작업 디렉터리:
__dirname: 현재 모듈의 디렉터리 이름

큰 상자

많은 npm 모듈에는 전역 시스템 경로에 설치하려는 실행 파일이 있습니다.

명령 이름을 파일 경로에 매핑하는 bin 필드가 package.json에 제공되어야 합니다. 다음과 같이:

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

그러면 any 명령이 로컬 실행 파일 ./bin/any에 매핑됩니다. 즉, 명령줄에서 any 명령을 실행하면 ./bin/any 실행 파일이 실행됩니다.

전역 설치의 경우 npm은 기호 링크를 사용하여 이러한 파일을 모든 시스템 바이너리 명령이 있는 /usr/local/bin 디렉터리에 연결합니다.
로컬로 설치된 경우 ./node_modules/.bin 디렉터리에 연결됩니다. 현재 디렉터리에서 any 명령을 실행할 때만 적용됩니다.

패키지 이름과 동일한 이름의 실행 파일이 하나만 있는 경우. 그런 다음 다음과 같이 문자열(파일 경로)을 사용할 수 있습니다.

{
    "name": "any-cli",
    "version": "1.2.5",
    "bin": "./bin/any"
}

다음과 동일:

{
    "name": "any-cli",
    "version": "1.2.5",
    "bin": {
        "any-cli": "./bin/any.js"
    }
}

npm 링크

전역 모듈에 연결된 로컬 디렉터리

npm 링크는 로컬 디렉터리를 전역 모듈에 연결할 수 있습니다.

모듈 개발자에게 이것은 가장 귀중한 명령입니다. 예를 들어, 모듈을 개발할 때 any-cli명령줄에서 이를 사용하여 코드를 테스트해야 합니다 any(개발 중에 릴리스가 없으면 모듈을 전역적으로 설치할 수 없습니다). 걱정하지 마세요. npm link를 사용하면 모든 것이 매우 쉽습니다.

예를 들어 우리 any-cli프로젝트 package.json에는 다음과 같은 명령이 있습니다.
```
"bin": {
    "any": "./bin/any.js"
},
```
명령줄에서 npm 링크 사용
```
$ npm link
```
다음과 같은 결과를 얻었습니다
```
/usr/local/bin/any -> /usr/local/lib/node_modules/any-cli/bin/any.js
/usr/local/lib/node_modules/any-cli -> /Users/{Username}/work/any-cli
```
창 아래:
```
C:\Users\Administrator\AppData\Roaming\npm\any -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\any-cli\bin\any.js
C:\Users\Administrator\AppData\Roaming\npm\node_modules\any-cli -> D:\Documents\Downloads\any-cli
```
/usr/local/bin 및 /usr/local/lib/node_modules 디렉토리로 이동하여 확인하세요. any우리는 내부에 더 많은 실행 파일과 디렉터리가 있다는 것을 발견했습니다 any-cli.
이런 방식으로 로컬 창고에 변경 사항이 있을 때마다 전역 명령도 업데이트됩니다. 그런 다음 개발과 테스트를 동시에 수행할 수 있습니다 .
로컬 디렉토리는 전역 모듈을 참조합니다.

temp-cli모듈 에 의존하는 다른 모듈이 있는 경우 any-cli다음 명령을 사용하여 any전역 모듈을 현재 모듈에 연결할 수 있습니다.
```
$ cd C:\temp-cli
$ npm link any-cli # 把全局模式的模块链接到本地
```
npm link any-cli 명령은 /usr/local/lib/node_modules디렉터리에서 any-cli 모듈을 검색하고, 모듈을 찾은 후 해당 /usr/local/lib/node_modules/any-cli디렉터리를 현재 디렉터리에 연결 temp-cli합니다 ./node_modules/any-cli.

이제 any-cli 모듈에 대한 모든 변경 사항이 temp-cli에 직접 매핑됩니다.

기타 필드:engine 및engineStrict(pakeage.js에 있음)

node7.6.0开始支持async，如何保证用户本地安装node7.6.0以上版本呢

엔진
노드별 버전을 로컬로 설치할 수 있습니다.
```
"engines": { "install-node": "7.6.0" }
```
필드를 사용하여 다음과 같이 프로그램을 더 잘 초기화하는 버전을 engines지정할 수도 있습니다 .npm
```
{ "engines" : { "npm" : "~1.0.20" } }
```
엔진엄격

모듈이 엔진 매개변수에 지정된 버전에서만 제대로 작동할 수 있다고 확신하는 경우 package.json파일에서 이를 설정할 수 engineStrict:true있으며 이는 사용자 engine-strict설정을 재정의합니다.
이 기능은 npm 3.0.0에서 더 이상 사용되지 않습니다.

타사 패키지: pre-commit/ora/commander/chalk

사전 커밋: 코드 검토를 위해 제출하기 전에 간단한 문제를 식별하는 데 유용한 Git 후크 스크립트입니다.
Commander: 사용자 명령줄 입력 및 매개변수 구문 분석을 위한 강력한 기능을 제공하는 경량 nodejs 모듈입니다.
분필: 명령줄에서 다양한 색상으로 텍스트를 출력하는 데 사용됩니다.
ora: 로딩 효과와 유사한 로딩 효과를 표시하는 데 사용됩니다.

코드 파일

any-cli프로젝트 생성

mkdir any-cli
cd any-cli
git init && npm init

package.json 내용

{
  "name": "any-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "pub": "npm version patch && npm publish",
    "pre-commit": "eslint src"
  },
  "author": "kk",
  "devDependencies": {
    "eslint": "^3.16.1",
    "eslint-config-airbnb": "^12.0.0",
    "eslint-plugin-babel": "^3.0.0",
    "eslint-plugin-import": "^1.6.1",
    "eslint-plugin-jsx-a11y": "^2.0.1",
    "eslint-plugin-markdown": "*",
    "eslint-plugin-react": "^6.3.0",
    "eslint-tinker": "^0.3.2",
    "pre-commit": "^1.2.2"
  },
  "dependencies": {
    "chalk": "^1.1.3",
    "child_process": "^1.0.2",
    "commander": "^2.9.0",
    "prompt": "^1.0.0"
  },
  "engines": {
    "install-node": "7.6.0"
  },
  "pre-commit": [
    "pre-commit"
  ],
  "bin": {
    "any": "./bin/any.js"
  },
  "license": "ISC"
}

bin 필드 아래의 구성은 명령줄 실행 가능 명령으로 처리됩니다. /bin 아래의 파일을 가리킵니다.
필드 엔진은 현재 디렉터리에 7.6.0 버전 노드를 설치하는데 사용되며, co 모듈을 사용하지 않고 바로 async 기능을 사용할 수 있습니다.
pre-commit은 제출하기 전에 코드를 확인하고 eslint인 사전 커밋 스크립트를 실행하는 데 사용됩니다.

루트 디렉터리에 /bin 폴더를 생성하고 임의의 파일을 생성합니다.

mkdir bin

이 /bin/any는 전체 스캐폴딩의 항목 파일이므로 먼저 작성합니다.

cd bin
cd.> any.js

#!/usr/bin/env node //解决不同的用户node路径不同的问题，可以让系统动态的去查找node来执行你的脚本文件
const add = require('../src/command/add')
const list = require('../src/command/list')
const init = require('../src/command/init')
const del = require('../src/command/del')
const program = require('commander')
const { version } = require('../package')

// 定义当前版本
program
.version(version)

program.parse(process.argv)
if (!program.args.length) {
  program.help()
}

/bin/any에 계속해서 코드를 추가합니다.

// 定义使用方法
/*
* 添加模板
* */
program
.command('add')
.description('add template')
.alias('a')
.action(add)

/*
 * 删除模板
 * */
program
.command('del')
.description('Delete a template')
.alias('d')
.action(del)

/*
 * 模板列表
 * */
program
.command('list')
.description('List all the templates')
.alias('l')
.action(list)

/*
 * 删除初始化
 * */
program
.command('init')
.description('Generate a new project')
.alias('i')
.action(init)

Command는 모든 명령의 매개변수를 구성하는 데 사용되며, alias는 약어를 구성하고, action은 실행할 기능을 구성합니다.

다른:

commander 的具体使用方法在这里就不展开了，可以直接到 [官网][2] 去看详细的文档。

npm link를 실행하여 현재 프로젝트를 전역 프로젝트에 연결하세요. 이런 방식으로 명령줄에서 any 명령을 직접 사용하여 /bin/any 아래 코드를 테스트할 수 있습니다.

// D:\Documents\Downloads\any-cli
npm link

any 명령을 사용하면 다음 출력이 표시됩니다. 이는 항목 파일이 작성되었음을 증명합니다.

  Usage: any [options] [command]


  Commands:

    add|a    add template
    del|d    Delete a template
    list|l   List all the templates
    init|i   Generate a new project

  Options:

    -h, --help     output usage information
    -V, --version  output the version number

다음으로 src/command 디렉토리를 생성합니다.

다음으로 지금 바로 4개의 매개변수에 해당하는 파일을 생성합니다.

파일의 내용은 특정 비즈니스 코드(각각 추가, 삭제 및 쿼리의 초기화에 해당)이며,

여기서는 소개를 하지 않겠습니다. github 링크를 참고해주세요 .