@qimingzizeinan/quick-cook v1.0.1

quick-cook

前端工作中,即使已经有了Vue或React等框架的帮助,开发速度已经加快了很多。但是依旧要写很多过去已经写过的布局html和css，使用Vue的第三方UI框架时依旧要粘贴、复制html、css和js,为了减少和自动完成这样的操作,提高开发效率,所以开发了这个工具。

安装

yarn add -D @qimingzizeinan/quick-cook

上手指南

// 请先查看和运行example下文件,这样能帮助你更好的理解使用方法
// Home.vue
<template>
 // leftRight需要使用的uiHandler的属性
 // js 合并js
 // css 合并css
 <qc>leftRight-js-css</qc>
 // 替换html和更新js
 <qc>leftRight-js</qc>
 // 仅替换html
 <qc>leftRight</qc>
</template>
// index.js
const { watchFiles } = require('../dist/ql');
const path = require('path')
// 替换ui处理的函数 具体格式请查看example文件夹index.js
const uiHandler = {
};

watchFiles(path.join(__dirname, './src'), {
  uiHandler,
});

// 启动
node index.js

注意

1 工具内使用了prettier格式化代码,所以与esLint部分配置不兼容，输出的文件可能会被eslint报警,可以选择选择vscode和eslint开启自动修复功能 2 工具内部检测到文件change后,会触发watchFiles函数 所以vscode和eslint修复操作和工具write文件操作之后也是文件change操作,所以会立刻再一次触发watchFiles

api

watchFiles(path, option)

option:{
 // chokidar npm包的配置
 chokidar:  {
  // 默认配置
  ignored: /(^|[\/\\])\../, // ignore dotfiles
  persistent: true
 },
 prettier:  {
  // 默认配置
  semi: false,
	parser: 'vue',
	trailingComma: 'none',
	singleQuote: true
 },
 uiHandler
}

版权

MIT