lazyCreator,一个为懒人而生的工具

623 阅读2分钟

懒惰是人类的天性,人类在懒惰中进步。人不想走路了,所以车就诞生了~

作为一个码农,每天都在想着如何能更好地偷懒,所以lazyCreator这个小玩具就应运而生了~

看到这可能你还不知道这东西是什么鬼,能做些什么?接下来是时候展现真正的技术了。。


看完上图各位大佬都能看出这货能做什么了吧。做这工具的初衷原本是在架构设计前端新项目时候想到的,因为团队人员每个人新建页面与模块时都纯手撸,各有各的风格。。。作为一个有洁癖的人实在不能忍。。。所以就用node.js撸了这货,让每个人做出来的页面都一摸一样。上面只是整个设计的一小部分,作为演示使用,仅供参考!

完成上面的工作,只需要以下代码即可实现:

const storeTemplate={ 
 state: "export default {}", 
 mutations: "export default {}", 
 actions: "export default {}", 
 getter: "export default {}",
 index: `import state from './state'
 import mutations from './mutations  
 import actions from './actions 
 import getter from './getter      
 exports default {
   state: state, 
   mutations: mutations,
   actions: actions,
   getter: getter}` 
};

const i18nTemplate={
    'en_US.js': "export default {}", 
    'zh_CN.js': "export default {}", 
    'zh_TW.js': "export default {}",
    'index.js': `import en_us from './en_US'; 
     import zh_cn from './zh_CN';    
     import zh_tw from './zh_TW'; 
     export default{ 
      en_US:en_us, 
      zh_CN:zh_cn, 
      zh_TW:zh_tw }`
 };

const VueTemplate = function(compoenntName) {
    return ` <style lang="scss" scoped> </style> 
             <template> 
                <div class="${compoenntName}-wrap"> 
                  ${compoenntName}组件
               </div> 
            </template>
            <script>            
              import components from './components'                
              export default {  
                    name: '${compoenntName}', 
                    components:components  
                 };            
           </script>`;};

lazyCreator
  .log(`请输入要创建的页面名称`)
  .onInput((inputName, ctx) => { 
        const targetPath = ctx.resolve(`src/pages/${inputName}`);
        const storePath = ctx.resolve(`${targetPath}/store`); 
        const i18nPath = ctx.resolve(`${targetPath}/i18n`);
        ctx.generateFile(targetPath, "page.vue", VueTemplate(inputName)); 
        ctx.log.success(`page.vue创建成功!`)
        ctx.generateFiles(storePath, storeTemplate);
        ctx.log.success(`store创建成功!`) 
        ctx.generateFiles(i18nPath, i18nTemplate); 
        ctx.log.success(`i18n创建成功!`)        
    })

原本设计了一套链式调用的API,不过自己操作起来都觉的不好用(关键是我技术比较low,设计不出好用的链式API),所以又重新设计了上面这套比较low的API,不过用起来还是勉强过得去。好了,我能提供的只有工具,其余只能靠到大佬们自己发挥~~周日结束了,周一还会远吗?

我的划水到此结束。。。

留图不留种,那个怕是要死人的呀......下面就留下这货的种子

guyhub: github.com/gikhub-HYT/…

guyee: gitee.com/VALR/lazy-c…

npm: www.npmjs.com/package/laz…

羞愧于入掘金这么久没啥子贡献,一直在这里偷师。以此略表心意,还望路过的大佬轻喷,赐教,点赞,收藏。小弟不胜感激。如果可以在同性交友网给个star那更是极好的。。。

祝:掘友们步步高升,财源滚滚滚滚滚滚。。此处省略一万个滚字

好了,我滚了,祝大家周一开心,拜拜了哦