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

目录

• Plop介绍

• Plop的具体应用

  • 具体步骤
• 总结

Plop介绍

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

• plop-npm
• plop-github

Plop的具体应用

具体步骤

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

npm install -g plop

1. 在目录下创立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);});

1. 在根目录下创立一个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'      }    ]  })}

1. 在package.json中增加

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

1. 运行

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);});

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

总结

1. 将plop模块作为我的项目开发依赖装置
2. 编写用于生成特定类型文件的模板
3. 在我的项目根目录下创立一个plopfile.js文件
4. 在plopfile.js文件中定义脚手架工作
5. 通过Plop提供的CLI运行脚手架工作