Part2-1-2 脚手架工具

Plop的基本使用

 

在项目中安装 plop

yarn add plop --dev

 

项目根目录添加plop配置文件  plopfile.js

// Plop 入口文件，需要导出一个函数
// 此函数接收一个 plop 对象，用于创建生成器任务

module.exports = plop => {
  plop.setGenerator('component', {
    description: 'create a component',
    prompts: [ // 命令行交互问题
      {
        type: 'input',
        name: 'name',
        message: 'component name',
        default: 'MyComponent'
      }
    ],
    actions: [
      {
        type: 'add', // 代表添加文件
        path: 'src/components/{{name}}/{{name}}.js',
        templateFile: 'plop-templates/component.hbs'
      },
      {
        type: 'add', // 代表添加文件
        path: 'src/components/{{name}}/{{name}}.css',
        templateFile: 'plop-templates/component.css.hbs'
      },
      {
        type: 'add', // 代表添加文件
        path: 'src/components/{{name}}/{{name}}.test.js',
        templateFile: 'plop-templates/component.test.hbs'
      }
    ]
  })
}

 

在项目根目录下添加 模板目录  plop-templates

在模板目录下添加模板文件

 

component.hbs

import React from 'react';

export default () => (
  <div className="{{name}}">
    <h1>{{name}} Component</h1>
  </div>
)

 

component.css.hbs

.{{name}} {
  
}

 

component.test.hbs

import React from 'react';
import ReactDOM from 'react-dom';
import {{name}} from './{{name}}';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<{{name}} />, div);
  ReactDOM.unmountComponentAtNode(div);
});

 

启动 plop 生成模板文件

yarn plop component

 

输入交互命令

 

添加多份plop模板的话 写多个plop.setGenerator就可以了

 

自定义脚手架

1、创建项目目录

2、在创建的项目下 yarn init 初始化项目

3、在 package.json 文件里 增加 字段 "bin": "cli.js", 指定 cli 入口文件

4、创建 cli 入口文件 cli.js

安装 inquirer ，使得可以使用用户交互命令   yarn add inquirer

安装模板引擎 ejs，使得可以使用模板引擎渲染模板文件   yarn add ejs  

项目里新建模板目录  templates，

在模板目录里新建 模板文件

#!/usr/bin/env node

// Node CLI 应用入口文件必须要有这样的文件头
// 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755
// 具体就是通过 chmod 755 cli.js 实现修改

// 脚手架的工作过程：
// 1. 通过命令行交互询问用户问题
// 2. 根据用户回答的结果生成文件

const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const ejs = require('ejs')

inquirer.prompt([
  {
    type: 'input',
    name: 'name',
    message: 'Project name?'
  }
])
.then(anwsers => {
  // console.log(anwsers)
  // 根据用户回答的结果生成文件

  // 模板目录
  const tmplDir = path.join(__dirname, 'templates')
  // 目标目录
  const destDir = process.cwd()

  // 将模板下的文件全部转换到目标目录
  fs.readdir(tmplDir, (err, files) => {
    if (err) throw err
    files.forEach(file => {
      // 通过模板引擎渲染文件
      ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {
        if (err) throw err

        // 将结果写入目标文件路径
        fs.writeFileSync(path.join(destDir, file), result)
      })
    })
  })
})

 

 

 

控制台输入命令 yarn link，使自定义的脚手架全局可用

输入脚手架名字，就可以执行 cli.js 的命令

 

 

 

 

 

 

 

 

 

 

 

 

1