프런트 엔드 스캐폴딩 사용자 정의

이번에는 프론트엔드 스캐폴딩 커스텀 빌드를 가져오겠습니다. 커스텀 프론트엔드 스캐폴딩의 주의사항은 무엇인가요? 아래에서 실제 사례를 살펴보겠습니다.

새 프로젝트를 작업할 때마다 폴더를 복사한 다음 package.json, README.md 등을 수정하는 것은 vue-cli와 같은 것을 사용하려는 경우 매우 "우아하다"고 느껴집니다. , 를 사용하세요. vue init를 사용하여 github에서 내 프런트엔드 프로젝트를 다운로드했는데 매우 "우아해" 보입니다. 괜찮다고 생각하시면 >>> x-build-cli에 별표를 표시해 주세요. vue-cli，使用vue init的方式在github下载我自己的前端工程，这样显得很“优雅”。如果您觉得还不错，请star >>>  x-build-cli。

初始化项目结构

首先你已经有了自己搭建的前端工程，假设起名为x-build，并且已经上传到github。

此时新建一个新的项目，起名为x-build-cli，我是参考vue的做法，这样即使x-build更新，x-build-cli不更新，也可以拉取到最新的x-build。

mkdir x-build-cli
cd x-build-cli
npm init

创建名为x-build-cli的文件夹，使用npm初始化，在文件夹内创建bin目录，并创建x-build.js，此时的项目结构：

x-build-cli
  |-  bin
  |     |- x-build.js
  |-  package.json

配置package.json

"bin": {
  "x-build": "./bin/x-build.js"
}

在package.json增加"bin"，"x-build"就是命令号要输入的指令，"./bin/x-build.js"是命令执行时的文件。

配置x-build.js

#! /usr/bin/env node
const program = require('commander');
const download = require('download-git-repo');
const chalk = require('chalk');
const ora = require('ora');

#! /usr/bin/env node是指定这个文件使用node执行。

需要安装的模块npm i commander download-git-repo chalk ora --save：

commander可以解析用户输入的命令。

download-git-repo拉取github上的文件。

chalk改变输出文字的颜色

ora小图标（loading、succeed、warn等）

program
  .version('0.1.0')
  .option('-i, init [name]', '初始化x-build项目')
  .parse(process.argv);

.option()

-i 是简写，类似于npm i -g

init后面的[name]可以通过program.init来获取到。

最后一项是描述，一般会在x-build -h提示

if (program.init) {
  const spinner = ora('正在从github下载x-build').start();
  download('codexu/x-build#x-build4.1', program.init, function (err) {
    if(!err){
      // 可以输出一些项目成功的信息
      console.info(chalk.blueBright('下载成功'));
    }else{
      // 可以输出一些项目失败的信息
    }
  })
}

ora().start()可以创建一个loading小图标。 >>> 其他图标参考ora

download()从github下载我们需要的项目，因为使用的是分支所以在后面加上了#x-build4.1，默认是master。 参数配置参考download-git-repo

chalk.blueBright()会将输出的文字转化为蓝色。 >>> 其他颜色参考chalk

上传npm

没有账号的同学去npm注册一个账号。

// 登录账号
npm login
// 上传项目
npm publish

上传成功之后，通过npm install x-build-cli -g安装到全局环境中。

使用build init [项目名]就可以从github拉取相应的文件。

优化

此时下载的文件与github一致，我想改变package.json，将name改为初始化的项目名，将version改为1.0.0。

此时就使用node自己的api就可以做到：

const fs = require('fs');
fs.readFile(`${process.cwd()}/${program.init}/package.json`, (err, data) => {
  if (err) throw err;
  let _data = JSON.parse(data.toString())
  _data.name = program.init
  _data.version = '1.0.0'
  let str = JSON.stringify(_data, null, 4);
  fs.writeFile(`${process.cwd()}/${program.init}/package.json`, str, function (err) {
    if (err) throw err;
  })
});

通过readFile读取文件，writeFile写入文件，写入时注意要传入字符串JSON.stringify(_data, null, 4)

프로젝트 구조 초기화

우선, x-build라는 이름으로 github에 업로드되었다고 가정하고 직접 빌드한 프런트엔드 프로젝트가 이미 있습니다.

이때, 새 프로젝트를 생성하고 이름을 x-build-cli로 지정합니다. vue의 접근 방식을 참조하여 x-build가 업데이트되더라도 x-build-cli가 업데이트되지 않은 경우에도 최신 x-build를 가져올 수 있습니다.

rrreee

x-build-cli라는 폴더를 만들고 npm으로 초기화한 다음 폴더 안에 bin 디렉터리를 만들고 x-build js를 만듭니다. , 현재 프로젝트 구조:

rrreee

Configure package.json

rrreee

package에 "bin", "x-build"를 추가합니다. json "은 명령어 번호에 입력할 명령어이고, "./bin/x-build.js"는 명령어 실행 시 파일이다.

Configure x-build.js

rrreee#! /usr/bin/env node는 이 파일이 node를 사용하여 실행되도록 지정합니다. .

설치해야 하는 모듈 npm i Commander download-git-repo chalk ora --save:

commander는 사용자가 입력한 명령을 구문 분석할 수 있습니다.
download-git-repo는 github에서 파일을 가져옵니다.

🎜분필출력 텍스트 색상 변경🎜🎜ora작은 아이콘(로드, 성공, 경고 등)🎜rrreee🎜.option()🎜🎜-i는 <code>npm i -g🎜🎜init와 유사한 약어입니다. 뒤의 <code>[name] init는 program.init를 통해 전달되어 이를 얻을 수 있습니다. 🎜🎜마지막 항목은 일반적으로 x-build -h에서 메시지가 표시되는 설명입니다.🎜rrreee🎜ora().start()는 작은 로딩 아이콘을 만들 수 있습니다. . >>> 다른 아이콘은 github에서 필요한 프로젝트를 다운로드하기 위해 ora🎜🎜download()를 참조합니다. 우리는 브랜치를 사용하기 때문에 끝에 #x-build4.1를 추가합니다. . 기본값은 마스터입니다. 매개변수 구성 참조🎜download-git-repo🎜🎜chalk.blueBright() 는 출력 텍스트를 파란색으로 변환합니다. >>> 다른 색상은 분필을 참고하세요🎜

npm에 업로드

🎜계정이 없는 학생은 npm에 가서 계정을 등록하세요. 🎜rrreee🎜업로드가 성공한 후 npm install x-build-cli -g를 통해 글로벌 환경에 설치하세요. 🎜🎜build init [프로젝트 이름]을 사용하여 github에서 해당 파일을 가져옵니다. 🎜

최적화

🎜 이때 다운로드한 파일이 github과 일치하고 name을 초기화된 프로젝트 이름, 버전을 1.0.0으로 변경하세요. 🎜🎜이때 노드 자체 API를 사용할 수 있습니다: 🎜rrreee🎜readFile 🎜, writeFile을 통해 파일 읽기 파일을 작성하려면 🎜JSON.stringify(_data, null, 4)를 사용하면 형식이 지정된 json 파일을 출력할 수 있습니다. 🎜🎜노드를 통해 쉽게 할 수 있습니다. 여기서는 개발할 여지가 많기 때문에 더 이상 말하지 않겠습니다. 🎜🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서: 🎜🎜🎜Component와 PureComponent의 차이점에 대한 자세한 설명🎜🎜🎜🎜🎜일반적으로 사용되는 CSS 스타일 요약🎜🎜🎜

위 내용은 프런트 엔드 스캐폴딩 사용자 정의의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!