前端百日进阶-5.脚手架开发

脚手架

脚手架主要用来初始化项目，类似的vue-cli以及create-react-app等,这里主要介绍yeoman,yeoman相较于上面两个更加的灵活可以对想要初始化项目让自己进行配置

yeoman的使用

全局安装yo，yo是Yeoman命令行实用程序，和脚手架模板（称为生成器）一起使用创建项目。

npm install -g yo

安装好了后在安装一个脚手架模版, 有很多脚手架模版可以选择(yeoman.io/generators/…

npm install -g generator-webapp

之后在使用yo来创建项目,创建项目一般为yo + 脚手架模版generator-后面的名字

yo webapp

使用yeoman创建自己的脚手架

最简单的使用

首先创建如下文件目录

├───package.json
└───generators/
    ├───app/
    │   └───index.js
    └───router/
        └───index.js
复制代码

package.json如下(name属性要符合yeoman生成器创建规则使用generator-xxx的形式,在后面使用中直接yo xxx即可执行)

{
  "name": "generator-test",
  "version": "1.0.0",
  "description": "",
  "keywords": [
    "yeoman-generator"
  ],
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "dependencies": {
    "yeoman-generator": "^5.2.0"
  }
}
复制代码

app/index.js如下

var Generator = require('yeoman-generator');

module.exports = class extends Generator {
    constructor(args, opts) {
        super(args, opts)

        // 这个方法添加了对babel的支持
        this.option('babel')
    }
    
    // 在内部随便添加的方法，此方法执行时会被调用
    dosome() {
        this.log('dosome~')
    }
  
    // 这种方法为私有方法不会被调用
    _private_method() {
        this.log('not call')
    }
};
复制代码

npm link链接到全局之后使用yo test 即可以看到执行结果

与用户交互

var Generator = require('yeoman-generator');

module.exports = class extends Generator {
    async prompting() {
        const answers = await this.prompt([
            {
                type: "input", 
                name: "name", 
                message: "你项目名称为?",
                default: this.appname 
            },
            {
                type: "confirm",
                name: "sass",
                message: "你同意使用sass吗?"
            }
        ])

        this.log('name', answers.name)
        this.log('sass', answers.sass)
    }
};
复制代码

在启动过程中传入参数yo test haha --nice

var Generator = require('yeoman-generator');

module.exports = class extends Generator {
    constructor(args, opts) {
        super(args, opts);
        // 提供支持传入第一个参数
        this.argument('appname', { type: String, required: true });
        // 提供支持传入--nice这种格式的输入结果为boolean
        this.option("nice");
    }

    dosome() {
        this.log(this.options.appname);      
        this.log(this.options.nice)
    }
};
复制代码

创建一个简单的模版

需要在app下面创建templates然后在templates下面创建模版

// <%= title %>
console.log('hello world')
复制代码

之后在app/index下写入逻辑

const Generator = require('yeoman-generator');

module.exports = class extends Generator {
    logSome() {
        //  返回当前执行目录
        console.log(this.destinationRoot());
        // 返回当前执行目录/index.js
        console.log(this.destinationPath('index.js'));
        // 返回当前generator-test源码下的模版文件夹templates
        console.log(this.sourceRoot());
        // 返回当前generator-test源码下的模版文件夹/index.js
        console.log(this.templatePath('index.js'));
    }

    write() {
        this.fs.copyTpl(
            this.templatePath('index.js'),
            this.destinationPath('index.js'),
            { title: 'Templating with Yeoman' }
        );
    }
};

复制代码

yo test执行即可看到生成的文件

// Templating with Yeoman
console.log('hello world')
复制代码

更多更加详细的用法参考:yeoman.io/authoring/i…

Plop的使用

plop相比于yeoman来说更加轻便,当在项目中每一次都要创建相同的文件时可以使用plop来创建一个统一的模版每次需要添加相同文件时不需要手动创建,yeoman更多用于项目的初始化。

安装

npm i plop -D

创建配置文件plopfile.js

module.exports = plop => {
    // 用于创建自己的动作 
    plop.setActionType('doTheThing', function (answers, config, plop) {
        // answers 为用户输入在这里为{ name: '你的输入' }
        // config 为配置的整个对象在这里为{ type: 'doTheThing', name: 'my name', force: false }
        // plop 为其他plop内置方法
        console.log(answers, config, plop)
        console.log('dosome')
    });

    // 设定一个生成器执行时使用这个名字
    plop.setGenerator('test', {
        description: 'test abourt plop',
        //  用户交互
        prompts: [
            {
                type: 'input',
                name: 'name',
                message: 'input name',
                default: 'hello world',
            },
        ],
        // 操作
        actions: [
            {
                // 代表添加文件
                type: 'add',
                // {{name}}与上面用户输入的对应
                path: 'dist/{{name}}.js',
                templateFile: 'templates/index.js',
            },
            {
                // 使用自己创建的动作
                type: 'doTheThing',
                name: 'my name'
            },
        ],
    });
};
复制代码

创建模版文件在templates/index.js

// {{name}}
console.log('hello world')
复制代码

执行生成

npx plop test

更多用法参考:www.npmjs.com/package/plo…