今天跟大家唠唠我最近折腾的“minty”小项目,一开始看到这个名字,还以为是啥薄荷糖相关的玩意儿,后来才知道,完全不是那么回事儿。
起因:
最开始是想搞个小工具,能快速生成一些简单的代码片段,省得我每次都得重复敲那些“hello world”级别的玩意儿。然后就在GitHub上瞎逛,看到有人推荐这个“minty”,说是能自定义模板,瞬间就来兴趣。
上手:
安装:这玩意儿安装倒是挺简单的,直接npm install -g minty
就完事儿。没啥难度,就是得确保你的*环境没问题。
这才是重点。minty的核心就是模板,你得告诉它你想生成什么样的代码。我先建个my-template
文件夹,然后在里面放个文件,内容大概是这样:
javascript
* = {
name: 'my-component',
prompts: [
type: 'input',
name: 'name',
message: 'Component name:'
template: './*',
dest: './components/{{name}}.js'
简单解释一下,name
是模板的名字,prompts
是用户需要输入的参数,template
是模板文件的路径,dest
是生成文件的路径。
上面的template
指向,这个就是真正的模板文件。我随便写个React组件的模板:
javascript
import React from 'react';
const {{name}} = () => {
return (
{{name}} Component
export default {{name}};
这里面的{{name}}
就是占位符,到时候会被用户输入的名字替换掉。
准备工作都做好,就可以运行minty。在命令行里输入minty my-template
,它就会提示你输入组件的名字,然后就会在./components/
目录下生成对应的js文件。
踩坑:
路径问题:一开始我路径老是写错,导致minty找不到模板文件。一定要注意template
和dest
里的路径,最好用相对路径,而且要确保路径是存在的。
模板文件里的占位符一定要用包起来,不然minty不会识别。而且占位符的名字要和prompts
里的name
对应上。
minty用的模板引擎好像是Handlebars,所以你可以用一些Handlebars的语法,比如{{#if}}
、{{#each}}
之类的。
minty这个小工具还是挺好用的,可以自定义模板,快速生成代码片段,提高开发效率。但是也有些缺点,比如模板语法比较简单,功能不够强大。如果你只是需要生成一些简单的代码,minty还是一个不错的选择。
下一步:
接下来我打算研究一下minty的源码,看看能不能扩展一下它的功能,比如支持更多的模板语法,或者增加一些插件之类的。如果能搞出来,以后生成代码就更方便。
还没有评论,来说两句吧...