关于javascript:Plop-小而美的脚手架工具

40次阅读

共计 2195 个字符，预计需要花费 6 分钟才能阅读完成。

Plop 介绍
Plop 的具体应用
- 具体步骤
总结

次要用于创立我的项目中特定文件类型的小工具，相似于 Yeoman 中的 sub generator，个别不会独立应用。个别会把Plop 集成到我的项目中，用来自动化的创立同类型的我的项目文件。

plop-npm
plop-github

新建目录，初始化npm init -y，装置Plop

npm install -g plop

在目录下创立 plop-templates 文件夹，外面创立三个模板文件

component.css.hbs

.{{name}} {}

component.hbs

import React from 'react';

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

component.test.hbs

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

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

在根目录下创立一个 plopfile.js 的文件，这个文件是 Plop 的入口文件，须要导出一个函数，这个函数接管一个 plop 对象，用于创立生成器工作。

plop.setGenerator：设置一个生成器，第一个参数是项目名称，第二个函数是对象，对应设置选项

配置项内容：

description：形容

prompts：值是数组，命令行交互问题，一个问题对应一个对象

actions：值是数组，实现命令行交互过后实现的一些动作，一个对象一个动作

module.exports = plop => {
  // 设置一个生成器，第一个参数是项目名称，第二个函数是对象，对应设置选项
  plop.setGenerator('compontent', {
    // 形容
    description: 'create a component',
    // 命令行交互问题
    prompts: [
        // 一个问题对应一个对象，配置参考自定义 Generator
      {
        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'
      }
    ]
  })
}

在 package.json 中增加

  "scripts": {"plop": "plop"}

运行

npm run plop
# 输出模块名称
? component name Header
#√  ++ \src\components\Header\Header.js
#√  ++ \src\components\Header\Header.css
#√  ++ \src\components\Header\Header.test.js

此时在根目录的 src\components 上面，有了三个文件

Header.js

import React from 'react';

export default () => (
  <div className="Header">
    <h1>Header Component</h1>
  </div>
)

Header.css

.Header {}

Header.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './Header';

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

这样，就能够依据模板一键生成一个组件目录。