如何创建属于自己的脚手架

作者: 一个健康马 | 来源:发表于2020-12-16 15:10 被阅读0次

如何创建属于自己的脚手架
Flutter 自定义小部件 AppBar
Maven脚手架搭建&使用
如何创建属于自己的依赖
angular使用NG ZORRO来构建博客展示项目(项目结构及
采用React+Ant Design组件化开发前端界面(一)
如何创建属于自己的域名邮箱
创建自己的脚手架
Vue笔记——组件之间的嵌套
2018-10-26

原理

我们每次搭建项目都需要创建项目，然后进行一系列的基础配置，封装基础api ，配置webpack,浪费了很多时间和精力，用自己封装的脚手架模板就可以每次像创建vue,react那样一样简单，有能力的还可以去封装自己的框架。
参考自beleve666大神的文章
源码查看github

原理就：利用npm封装插件，拉取我们在github上托管的项目，拉取完毕后把依赖的.git .svn删除掉并用node.js更改json参数

1. 先上插件依赖

commander:完整的 node.js 命令行解决方案
download-git-repo：用于下载，git仓库拉取
inquirer：用户与命令行交互的工具
ora：实现node.js 命令行环境的 loading效果，和显示各种状态的图标等
log-symbols：提供带颜色的符号
Chalk：改变文字背景颜色
node-notifier：通知插件
shelljs：可以调用命令行工具

2.先搭一个基础npm包

npm包发布教程这里就不多说了

3.先创建基础命令

我们需要将我们的项目做下改动，首先在packge.json中添加如下内容：

 "bin": {
        "template-ma": "index.js"
    },

"template-ma"是你自定义的命令，到这里还不能使用，必须使用npm link 链接到全局

3.创建入口文件

Index.js文件

#!/user/bin/env node
//你想要你的这个文件中的代码用什么可执行程序去运行它
//!/usr/bin/env node会去环境设置寻找node目录
const commander = require('commander');//引入插件
commander.command('init <name>') // 定义init子命令，<name>为必需参数可在action的function中接收，如需设置非必需参数，可使用中括号
    .option('-d, --dev', '获取开发版') // 配置参数，简写和全写中使用,分割
    .description('创建项目') // 命令描述说明
    .action(function(name,option)){ 
          console.log(name,option)
        //这里可以对参数进行操作 
      }
//这里通过 command定义Init 子命令  当使用 init <name> 的时候 name 会在action中接收，
// option中 是传递配置参数，也在action中接收 
//action接收一个回调 action(function(name,option)){ 这里可以对参数进行操作 }

//查询版本号
commander.version(require('./package.json').version,'-v,-V,--version', '查看版本号')  

//这句话必须写在最后面   提供帮助  -h
commander.parse(process.argv);

这里可以运行一下

template-ma test -d
打印
test
true

4.创建执行函数

做一下拆分把action函数提取到外部

//index.js
const initAction = require('./commands/init')
commander.command('init <name>') // 定义init子命令，<name>为必需参数可在action的function中接收，如需设置非必需参数，可使用中括号
    .option('-d, --dev', '获取开发版') // 配置参数，简写和全写中使用,分割
    .description('创建项目') // 命令描述说明
    .action(initAction);
)

commands/init文件

const initAction = async (name, option) => {
}
module.exports = initAction;

5.拉取模板

我们需要在github上托管自己的脚手架模板
然后我们需要用download-git-repo拉取模板
和shelljs工具进行条件判断

 //  检查控制台是否可以运行`git `，
    if (!shell.which('git')) {
        console.log(symbols.error, '对不起，git命令不可用！');
        shell.exit(1);
    }
    //  验证输入name是否合法
    if (fs.existsSync(name)) {
        console.log(symbols.warning,`已存在项目文件夹${name}！`);
        return;
    }
    if (name.match(/[^A-Za-z0-9\u4e00-\u9fa5_-]/g)) {
        console.log(symbols.error, '项目名称存在非法字符！');
        return;
    }
    // 获取option，确定模板类型（分支）
    if (option.dev) branch = 'develop';

然后是拉取模板

function clone (remote, name, option) {
//三个参数，拉取的路径，名字 ，分支
    const downSpinner = ora('正在下载模板...').start();
//ora用于输出loading
    return new Promise((resolve, reject) => {
        download(remote, name, option, err => {
            if (err) {
                downSpinner.fail();
                console.log(symbols.error, chalk.red(err));
                //chalk改变文字颜色
                reject(err);
                return;
            };
            downSpinner.succeed(chalk.green('模板下载成功！'));
            resolve();
        });
    });
  await clone(`direct:${remote}#${branch}`, name, { clone: true });

清理文件

拉取下来后是和远程仓库关联的，所以我们要把它们删掉，还有清除一些多余的文件

 const deleteDir = ['.git', '.gitignore', 'README.md', 'docs']; // 需要清理的文件
    const pwd = shell.pwd();
    deleteDir.map(item => shell.rm('-rf', pwd + `/${name}/${item}`));

根据用户需求更改配置

这里用到inquirer可以与命令行进行交互

我们可以设置几个问题

 const questions = [
    {
        type: 'input',
        message: '请输入模板名称:',
        name: 'name',
        validate(val) {
        if (!val) return '模板名称不能为空！';
        if (val.match(/[^A-Za-z0-9\u4e00-\u9fa5_-]/g)) return '模板名称包含非法字符，请重新输入';
        return true;
        }
    },
    {
        type: 'input',
        message: '请输入模板关键词（;分割）:',
        name: 'keywords'
    },
    {
        type: 'input',
        message: '请输入模板简介:',
        name: 'description'
    },
]

通过inquirer获取到用户输入的内容

const answers = await inquirer.prompt(questions);
    // 将用户的配置打印，确认一下是否正确
    console.log('------------------------');
    console.log(answers);

    let confirm = await inquirer.prompt([
        {
            type: 'confirm',
            message: '确认创建？',
            default: 'Y',
            name: 'isConfirm'
        }
    ]);
 if (!confirm.isConfirm) return false;

我们拿到用户输入的值就可以根据用户的参数进行更改

//简单的读取操作 就不过多描述了
 let jsonData= fs.readFileSync((path.join(__dirname,'./'), 'malunan/package.json'),function(err,data){
       console.log(err)
    })
    jsonData=JSON.parse(jsonData)
    for(item in answers){
        jsonData[item]=answers[item]
    }
    let obj=JSON.stringify(jsonData,null,'\t')
    let sss=fs.writeFileSync((path.join(__dirname,'./'), 'malunan/package.json'),obj,function(err,data){
        console.log(err,data)
    })

这样我们就根据用户的参数，写入到了package.json文件其他的用途可自行开发

自动安装依赖

const installSpinner = ora('正在安装依赖...').start();
    if (shell.exec('npm install').code !== 0) {
        console.log(symbols.warning, chalk.yellow('自动安装失败，请手动安装！'));
        installSpinner.fail(); // 安装失败
        shell.exit(1);
    }
    installSpinner.succeed(chalk.green('依赖安装成功！'));

    //切入后台的时候给用户提示
    notifier.notify({
        title: 'YNCMS-template-cli',
        icon: path.join(__dirname, 'coulson.png'),
        message: ' ♪(＾∀＾●)ﾉ 恭喜，项目创建成功！'
    });

    // 自动打开编辑器
    if (shell.which('code')) shell.exec('code ./');
    shell.exit(1);

这样脚手架就搭建完毕了，可以在本地 template-ma init <name> 试一下效果

源码

index.js

#!/usr/bin/env node

const commander = require('commander');
const initAction = require('./commands/init')
//查询版本号
commander.version(require('./package.json').version,'-v,-V,--version', '查看版本号')  
commander.command('init <name>') // 定义init子命令，<name>为必需参数可在action的function中接收，如需设置非必需参数，可使用中括号
    .option('-d, --dev', '获取开发版') // 配置参数，简写和全写中使用,分割
    .description('创建项目') // 命令描述说明
    .action(initAction);


//这句话必须写在最后面   提供帮助  -h
commander.parse(process.argv);

clone.js

// utils/clone.js
const download = require('download-git-repo');
const symbols = require('log-symbols');  // 用于输出图标
const ora = require('ora'); // 用于输出loading
const chalk = require('chalk'); // 用于改变文字颜色
module.exports = function (remote, name, option) {
    const downSpinner = ora('正在下载模板...').start();
    return new Promise((resolve, reject) => {
        download(remote, name, option, err => {
            if (err) {
                downSpinner.fail();
                console.log(symbols.error, chalk.red(err));
                reject(err);
                return;
            };
            downSpinner.succeed(chalk.green('模板下载成功！'));
            resolve();
        });
    });
  };

init.js

// commands/init.js
const shell = require('shelljs');
const symbols = require('log-symbols');
const clone = require('../utils/clone.js');
const remote = 'https://github.com/MaLunan/components.git';
const fs =require('fs')
const ora = require('ora'); // 用于输出loading
const chalk = require('chalk'); // 用于改变文字颜色
const notifier =require('node-notifier')
const path = require('path')
let branch = 'master';

const initAction = async (name, option) => {
    // 0. 检查控制台是否可以运行`git `，
    if (!shell.which('git')) {
        console.log(symbols.error, '对不起，git命令不可用！');
        shell.exit(1);
    }
    // 1. 验证输入name是否合法
    if (fs.existsSync(name)) {
        console.log(symbols.warning,`已存在项目文件夹${name}！`);
        return;
    }
    if (name.match(/[^A-Za-z0-9\u4e00-\u9fa5_-]/g)) {
        console.log(symbols.error, '项目名称存在非法字符！');
        return;
    }
    // 2. 获取option，确定模板类型（分支）
    if (option.dev) branch = 'develop';
    // 4. 下载模板
    await clone(`direct:${remote}#${branch}`, name, { clone: true });

    // 5. 清理文件
    const deleteDir = ['.git', '.gitignore', 'README.md', 'docs']; // 需要清理的文件
    const pwd = shell.pwd();
    deleteDir.map(item => shell.rm('-rf', pwd + `/${name}/${item}`));
    const inquirer = require('inquirer');
    // 定义需要询问的问题
    const questions = [
    {
        type: 'input',
        message: '请输入模板名称:',
        name: 'name',
        validate(val) {
        if (!val) return '模板名称不能为空！';
        if (val.match(/[^A-Za-z0-9\u4e00-\u9fa5_-]/g)) return '模板名称包含非法字符，请重新输入';
        return true;
        }
    },
    {
        type: 'input',
        message: '请输入模板关键词（;分割）:',
        name: 'keywords'
    },
    {
        type: 'input',
        message: '请输入模板简介:',
        name: 'description'
    },
    // {
    //     type: 'list',
    //     message: '请选择模板类型:',
    //     choices: ['响应式', '桌面端', '移动端'],
    //     name: 'type'
    // },
    // {
    //     type: 'list',
    //     message: '请选择模板分类:',
    //     choices: ['整站', '单页', '专题'],
    //     name: 'category'
    // },
    // {
    //     type: 'input',
    //     message: '请输入模板风格:',
    //     name: 'style'
    // },
    // {
    //     type: 'input',
    //     message: '请输入模板色系:',
    //     name: 'color'
    // },
    {
        type: 'input',
        message: '请输入您的名字:',
        name: 'author'
    }
    ];
    // 通过inquirer获取到用户输入的内容
    const answers = await inquirer.prompt(questions);
    // 将用户的配置打印，确认一下是否正确
    console.log('------------------------');
    console.log(answers);

    let confirm = await inquirer.prompt([
        {
            type: 'confirm',
            message: '确认创建？',
            default: 'Y',
            name: 'isConfirm'
        }
    ]);
    if (!confirm.isConfirm) return false;
    //根据用户配置调整文件
   let jsonData= fs.readFileSync((path.join(__dirname,'./'), 'malunan/package.json'),function(err,data){
       console.log(err)
    })
    jsonData=JSON.parse(jsonData)
    for(item in answers){
        jsonData[item]=answers[item]
    }
    console.log(jsonData)
    console.log(path.join(__dirname,`${name}/`))
    let obj=JSON.stringify(jsonData,null,'\t')
    let sss=fs.writeFileSync((path.join(__dirname,'./'), 'malunan/package.json'),obj,function(err,data){
        console.log(err,data)
    })
    //自动安装依赖
    const installSpinner = ora('正在安装依赖...').start();
    if (shell.exec('npm install').code !== 0) {
        console.log(symbols.warning, chalk.yellow('自动安装失败，请手动安装！'));
        installSpinner.fail(); // 安装失败
        shell.exit(1);
    }
    installSpinner.succeed(chalk.green('依赖安装成功！'));

    //切入后台的时候给用户提示
    notifier.notify({
        title: 'YNCMS-template-cli',
        icon: path.join(__dirname, 'coulson.png'),
        message: ' ♪(＾∀＾●)ﾉ 恭喜，项目创建成功！'
    });

    // 8. 打开编辑器
    if (shell.which('code')) shell.exec('code ./');
    shell.exit(1);
};


module.exports = initAction;

如何创建属于自己的脚手架
原理我们每次搭建项目都需要创建项目，然后进行一系列的基础配置，封装基础api ，配置webpack,浪费了很多时...
Flutter 自定义小部件 AppBar
如何在Scaffold(脚手架)构造属于自己的小部件呢？那么开始吧。第一步：创建StatelessWidget，...
Maven脚手架搭建&使用
本文简单介绍一下使用自己的脚手架创建工程第一步创建脚手架工程创建脚手架工程 fly-bom 定义好模板（包、...
如何创建属于自己的依赖
一、创建一个项目二、将项目上传到GitHub上(具体上传的流程大家应该都晓得)我的demo地址传送门(如下图) ...
angular使用NG ZORRO来构建博客展示项目(项目结构及
返回目录创建项目使用angular脚手架搭建项目。如何使用angular脚手架搭建项目参看这篇文章安装NG ...
采用React+Ant Design组件化开发前端界面(一)
基础知识 1.使用脚手架创建项目并启动 1.1 安装脚手架： 1.2 使用脚手架创建项目： ...
如何创建属于自己的域名邮箱
前言最近在爬虫过程中，突发奇想能不能创建属于自己的域名邮箱，所以上网查询了相关资料，发现一些平台提供了域名邮箱设...
创建自己的脚手架
1.初始化工程 npm init2.安装插件npm i commander download-git-repo ...
Vue笔记——组件之间的嵌套
之前写过一篇文章，介绍了如何安装Vue的新旧版本脚手架，同时也介绍了如何使用新旧版本的脚手架快速创建Vue项目，感...
2018-10-26
1. 使用React脚手架创建一个React应用 1). react脚手架 xxx脚手架: 用来帮助程序员快速创建...

如何创建属于自己的脚手架

原理

1. 先上插件依赖

2.先搭一个基础npm包

3.先创建基础命令

3.创建入口文件

4.创建执行函数

5.拉取模板

清理文件

根据用户需求更改配置

自动安装依赖

源码

相关文章

如何创建属于自己的脚手架

Flutter 自定义小部件 AppBar

Maven脚手架搭建&使用

如何创建属于自己的依赖

angular使用NG ZORRO来构建博客展示项目(项目结构及

采用React+Ant Design组件化开发前端界面(一)

如何创建属于自己的域名邮箱

创建自己的脚手架

Vue笔记——组件之间的嵌套

2018-10-26

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读