json

12 天前

自制前端脚手架

本文作者:IMWeb json 原文出处:IMWeb社区 未经同意,禁止转载

前言

新建项目是很繁琐的一项工作, 要考虑项目目录结构,基础库的配置等等。 前段时间因为需求使用了几款前端脚手架,包括yeoman、imweb-cli, 他们功能丰富 ,简单高效,其核心功能是根据用户选择的模板快速的新建一个完整的项目,也可以在其中做一些自定义的配置。
学会了使用架手架,便想了解脚手架到底是怎么工作的, 阅读了相关脚手架的源码后,对原理有了一点心得。

脚手架的原理

generators是yeoman生态系统的积木,通过yo命令运行而为终端用户生产文件,yeoman-generator本质上是一个有着完整项目结构的模板 , yo根据用户选择不同的generator生成不同的项目。

imweb-cli也是一个以模板为核心的脚手架, 通过定制不同的模板, 可以实现初始化项目以及为已有项目添加符合规范的文件片段,这一点在新建页面的时候特别有用。 想了解的同学可以访问(https://www.npmjs.com/package/imweb-cli)

脚手架目录结构

了解了脚手架基本原理后,我们来尝试自己制作一款脚手架。首先要明白脚手架的核心是模板,什么是模板呢? 模板就是包含一个项目完整信息的目录结构。 脚手架提供了对模板增、删、改、查的功能及初始化项目必要的能力。

下面是自制脚手架的目录结构:


  |__ bin
    |__struct                 // 脚手架命令
    |__struct-init 
  |__ lib
    |__ add.js
    |__ delete.js
    |__ list.js    
  |__ node_modules
  |__.gitignore
  |__ package.json
  |__ templates.json     // 模板存放文件
  |__ README.md 

  

脚手架结构解析

创建入口文件

在bin目录下新建2个不带后缀名的文件, 命名为struct , 主要提供对模板操作的能力。

struct-init提供初始化项目的能力。

在package.json 中添加如下配置:

 "bin": {
    "struct": "bin/struct",
    "struct-init": "bin/struct-init"
  }
  
这样配置后, 便于在全局使用struct 和struct init 2个命令

对模板的操作——struct

bin目录下的struct文件, 提供了对模板的操作的功能。 下面是文件的初始化代码,

#!/usr/bin/env node    //必须放到文件开头

const program = require('commander');

program
  .version(require('../package').version)     //  显示版本号
  .usage('<command> [options]');

模板的的操作代码如下:

program
    .command('list')
  .description('显示所有模板')
  .action(require('../lib/list'));

program
    .command('add')
    .description('添加模板')
    .action(require('../lib/add'));

program
    .command('delete')
//    .alias('d')
    .description('删除模板')
    .action(require('../lib/delete'));

将具体的对模板添加、删除、显示的主题功能放在了lib下面。

运行 npm link 将脚手架挂在到全局 , 此时可以在命令行调试新建的脚手架框架了。

在任意目录下运行命令struct -h, 可以看到刚完成的脚手架命令可以在全局生效了。


E:\code>struct -h

  Usage: struct  [options]


  Options:

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


  Commands:

    list        显示所有模板
    add         添加模板
    delete      删除模板
    init        用一个模板生成项目
    help [cmd]  display help for [cmd]

显示模板

在lib下新建 list.js , 在用户输入struct list命令时, 读取根目录下存储模板信息的文件template.json, 在终端显示,如下:


const fs = require('fs');
const chalk = require('chalk');
const tplJson = require(`${__dirname}/../template.json`);

module.exports = function() {
    Object.keys(tplJson).forEach((item) => {
        let tplData = tplJson[item];
        console.log('  ' + 
            chalk.yellow('★') + 
            '  ' + chalk.yellow(tplData.name) + 
            ' - ' + tplData.description + 
            ' - ' + chalk.red(`模板安装包${tplData.npm}`));
    })
}

添加模板

在lib下新建add.js,在用户输入struct add命令时 , 使用inquirer库向用户提问, 并获取输入,将新加的模板信息,写入template.json .

const fs = require('fs');
const path = require('path');
const { prompt } = require('inquirer'); 
const tplPath = path.resolve(__dirname, '../template.json');
const tplJson = require(tplPath);

const questions = [
    {
        type: 'input',
        name: 'name',
        message: '模板名称',
        validate: function(val) {
            if (!val) {
                return '模板名称不为空'
            } else {
                return true;
            }        
        }
    },
    {
        type: 'input',
        name: 'description',
        message: '模板描述',
        validate: function(val) {
            if (!val) {
                return '模板名称不为空'
            } else {
                return true;
            }        
        }
    },
    {
        type: 'input',
        name: 'npm',
        message: '模板包名称,(ps: 创建项目使用这个npm包)',
        validate: function(val) {
            if (!val) {
                return '模板名称不为空'
            } else {
                return true;
            }        
        }
    }
];

module.exports = function() {
    prompt(questions).then(function(data) {
        tplJson[data.name] = {};
        tplJson[data.name]['name'] = data.name;
        tplJson[data.name]['description'] = data.description;
        tplJson[data.name]['npm'] = data.npm;

        fs.writeFile(tplPath, JSON.stringify(tplJson), 'utf-8', function(err, data) {
            if (err) {
                console.log('模板添加失败');
            } 
            console.log('模板添加成功');
        });
    });
};

删除模板

在lib下新建delete.js,在用户输入struct delete命令时 , 删掉template.json中的模板信息即可

module.exports = function() {
    prompt(questions).then(function(data) {
        delete tplJson[data.name];

        fs.writeFile(tplPath, JSON.stringify(tplJson), 'utf-8', function(err, data) {
            if (err) {
                console.log('模板删除失败');
            } 
            console.log('模板删除成功');
        });
    });
};

初始化项目

struct init 提供初始化项目的功能, 用法如下:

使用发布成npm包的制作好的模板,新建项目, 项目包括了模板的一切目录、结构等信息。

首先是struct-nint.js的初始化代码,就用户输入的一些判断

program
  .usage('<template-name> [project-name]');

program.on('--help', function () {
  console.log('  Examples:')
  console.log()
  console.log(chalk.yellow('    # 使用npm模板创建'))
  console.log('    $ struct init template-name my-project')
  console.log('    $ struct init webpack my-project')
  console.log()
});
// init 命令的帮助文档
function help () {
  program.parse(process.argv)
  if (program.args.length < 1) return program.help()
}

help();

const template = program.args[0];
const dir = program.args[1];
const to = path.resolve(dir || '.');
 // 模板不存在将不执行初始化项目的操作
if (!tplJson[template]) {
    console.log(chalk.red(`template.json里没有${template}的模板信息,请添加!`));
    return;
}
if (!dir || dir.indexOf('/') > -1) {
    console.log(chalk.red('请输入项目名名称'));
    return;
}

下面是新建项目的核心代码, 首先是下载模板到本地 , 然后根据模板信息, 生成新项目。


function run () {
    console.log(chalk.yellow(`使用模板${template}创建项目`));
    const spinner = ora('正在下载模板');
    spinner.start();

     // 下载模板到本地

    exec(`tnpm i ${tplJson[template].npm}`, (err, data) => {
        spinner.stop();
        process.on('exit', () => {
            rm(`${process.cwd()}/node_modules`)
        })
        if (err) {
            console.log(chalk.red('模板下载失败 ', err.message));
        }
        const tplPath = `${process.cwd()}/node_modules/${tplJson[template].npm}`;
        const opts = require(`${tplPath}/meta`);
        const projectPath = `${process.cwd()}/${dir}`;

        // 生成新项目

        Metalsmith(`${tplPath}/template`)
            .source('.')
            .destination(`${projectPath}`)
            .build(function(err) {
                if (err) {
                    console.log(chalk.red('项目生成失败', err));
                }
                console.log(chalk.yellow(' \n 项目已创建'));
            })
    });
}

运行效果


自此, 脚手架框架制作完成 。 可以根据自己的需要来定制模板,从而初始化不同的项目。

最后使用npm账号发布即可。(https://www.npmjs.com/package/struct-cli)

0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。