Customize front-end scaffolding

This time I will bring you a custom build of front-end scaffolding. What are theprecautions for custom build of front-end scaffolding? The following is a practical case, let's take a look.

vue-cli, usevue initdownloaded my own front-end project from github, which looks very "elegant". If you think it looks good, please star >>> x-build-cli.

Initialize the projectStructure

x-build-cli. I refer to vue’s approach, so that even ifx-buildis updated,x-build-cliis not updated, you can also pull the latestx-build.

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

x-build-cli, initialize it using npm, create abindirectory inside the folder, and createx- build.js, the project structure at this time:

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

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

Copy after login

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

Copy after login

#! /usr/bin/env nodespecifies that this file is executed using node.

commandercan parse the commands entered by the user.

download-git-repoPull the files on github.

chalkChange the color of the output text

oraSmall icons (loading, succeed, warn, etc.)

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

-iis an abbreviation, similar to the[name afternpm i -g

init]can be obtained throughprogram.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()You can create one loading small icon. >>> For other icons, refer to ora

#x-build4.1at the end. , the default is master. ParametersConfiguration referencedownload-git-repo

chalk.blueBright()will convert the output text into blue. >>> For other colors, please refer to chalk

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

build init [project name]to pull the corresponding files from github.

nameto the initialized project name, and changeversionChanged to 1.0.0.

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; }) });

, writeFile to write the file, be careful to pass it in when writingStringJSON.stringify(_data, null, 4), this way you can output a formatted json file.It can be done easily through node. There is a lot of room for development here, so I won’t say more.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of Customize front-end scaffolding. For more information, please follow other related articles on the PHP Chinese website!