Сан Ниан, пожалуйста, не стучи по шаблону.

JavaScript
Сан Ниан, пожалуйста, не стучи по шаблону.

написать впереди

Перемещение кирпичей каждый день уже стал резюме инженера. Частое копирование и вставка, а затем удаление после копирования, скучно и скучно. В проекте мы обычно настраиваем сочетания клавиш в редакторе для генерации фрагментов кода. Кажется, что это не может удовлетворить желание резюме. Особенно важно настроить некоторые файлы шаблонов, связанных с бизнесом, в проекте, а затем динамически сгенерировать файлы. Не ограничивается редактором, лучше настраиваемая конфигурация, мощнее.

Первый взгляд на эффект

На самом деле существует множество способов создания фрагментов кода, например, фрагменты кода можно создавать, настроив сочетания клавиш в редакторе кода. Например, вы также можете установить плагины в vscode. Хотя редактор может быть реализован, он не может быть более индивидуальным.

В крупномасштабном проекте многие страницы относительно похожи, да и уровень кода в принципе схож.Обычно для создания нового компонента страницы нужно скопировать предыдущую страницу, скопировать файл конфигурации апи, скопировать файлы в магазине , а затем изменить соответствующие переменные, часто также будут пропуски.

Теперь мы можем извлечь общую часть этой части кода в файл шаблона, и узнать, нужно ли нам добавить какие-то фрагменты кода, спросив. Судя, а затем сгенерировать соответствующий файл. Таким образом, мы можем сформировать общий метод генерации кода, уникальный для проекта, и должным образом повысить эффективность работы.

Основные шаги:

  1. Извлеките общедоступный код в проекте, чтобы сформировать файл шаблона.
  2. Собрать через 'аск', настроить некоторую конфигурацию страницы
  3. создать соответствующий файл

использовать здесьplopИнструмент для некоторой конфигурации, давайте посмотрим!

Установить

Как правило, выберите установку в локальный проект, выполните следующую команду для установки:

// 全局安装
npm i -g plop

// 本地安装
npm i plop -D

Настройте команду скриптов:

// package.json
"scripts": {
  // ...
  "g": "plop --plopfile generators/index.js"
  // ...
}

бегатьnpm run gСоответствующая конфигурация может быть выполнена. вgenerators/index.jsВходной файл для выполнения команды.
Соответствующая конфигурация будет представлена ​​позже.

основное использование

Для соответствующей конфигурации, пожалуйста, обратитесь к официальной документации.Я буду вводить в проект только свою собственную конфигурацию.Вы можете обратиться к ней.

Вот добавляю на основе одного из своих проектов, адрес проекта такойНажмите, чтобы просмотреть.

существуетgenerators/index.jsЯ настроил четыре вида команд:

  • компонент: генерировать общедоступные компоненты
  • просмотры: создание страниц
  • vuex: генерировать файл модулей в магазине
  • API: создать файл конфигурации API
// 引入各模块配置文件
const componentGenerrator = require('./component/index.js')
const viewGenerrator = require('./view/index.js')
const storeGenerrator = require('./store/index.js')
const apiGenerrator = require('./api/index.js')

module.exports = plop => {
  // component 相关
  plop.setGenerator('component', componentGenerrator)
  // views 相关
  plop.setGenerator('views', viewGenerrator)
  // vuex 相关
  plop.setGenerator('vuex', storeGenerrator)
  // api 相关
  plop.setGenerator('api', apiGenerrator)
}

Сначала покажите структуру каталогов:

├ generators    // 所在文件加
  ├─api         // api 相关
  ├─component   // component 相关
  ├─store       // vue 相关
  ├─utils       // 工具函数
  ├─view        // view 相关
  └─index.js    // 入口文件

vuex-модуль

Сначала просмотрите эффект:

существуетvuexмодуль, в основном для созданияmodulesдокумент. Сгенерируйте файлы на основе файлов шаблонов и поместите их вstore/modulesпод папку. Файл шаблона выглядит следующим образом:

// ./store/modules.hbs 模板文件
const state = {

}

const mutations = {

}

const actions = {

}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

Генерация этого шаблона по-прежнему очень проста, нам нужно только получить имя файла сгенерированного файла через «аск», который используется здесь.modulesПринимает имя папки, введенное пользователем в командной строке. затем вactionsВ разделе Настройте путь к сгенерированному файлу. Соответствующая конфигурация подробно не описана, вы можете проверить соответствующие примечания.

Атрибуты тип значение
description String Краткое описание команды
prompts array Спросите пользователя
actions Array/Function эксплуатационное поведение, еслиFunction, входные параметры — это параметры, собранные после запроса, возвращаемыеactionsнастроить 
// ./store/index.js 配置文件
module.exports = {
  description: 'vuex modules', // 这里是对该plop的功能描述
  // 问题询问
  prompts: [
    {
      type: 'input',  // 问题类型 此处为输入
      name: 'modules', // actions 和 hbs 模板文件中可使用该变量
      message: '请输入模块名称', // 问题
      default:'app' // 问题的默认答案
    }
  ],
  // 操作行为
  actions: [
    {
      type: 'add', // 操作类型，这里是添加文件
      path: '../src/store/modules/{{kebabCase modules}}.js', // 添加的文件的路径
      templateFile: './store/modules.hbs'   // 模板文件的路径
    }
  ]
}

вkebabCaseФорматированные данные,modulesПреобразование в небольшой формат верблюжьего корпуса.
Следующие ключевые слова также часто используются для форматирования входных параметров пользователя:

  • camelCase: changeFormatToThis маленький верблюжий случай
  • правильныйCase/pascalCase: ChangeFormatToThis большой горб

Дополнительные ключевые слова см. в соответствующих документах.Нажмите, чтобы просмотреть

файл конфигурации апи

Сначала просмотрите эффект:

Конфигурация модуля API аналогична описанной выше операции, я вставлю соответствующую конфигурацию напрямую и представлю только различные части.

Подготовьте соответствующие файлы шаблонов следующим образом:

// ./api/api.hbs
import Request from '@/utils/request'

export const get{{properCase file}}List = data => Request.get('{{kebabCase dir}}/{{kebabCase file}}', data)

В проектеapiфайл конфигурации я положил/src/apiВ каталоге имя папки — это имя модуля соответствующей страницы, а имя файла — имя конкретной страницы, поэтому его нужно получить, спросив.dirпараметрapiИмя папки, которая будет создана в каталоге,fileИмя файла, соответствующего параметру.

// ./api/index.js
module.exports = {
  description: 'api 配置文件',
  // 询问
  prompts: [
    {
      type: 'input',
      name: 'dir',
      message: '请输入文件夹名称'
    },
    {
      type: 'input',
      name: 'file',
      message: '请输入文件名称'
    }
  ],
  // 操作行为
  actions: [
    {
      type: 'add',
      path: '../src/api/{{camelCase dir}}/{{camelCase file}}.js',
      templateFile: './api/api.hbs'
    }
  ]
}

просмотры страницы

Сначала просмотрите эффект:

Конфигурация немного сложнее предыдущей, но пошаговый анализ тоже понятен.

Ниже через заданный запрос, объясните медленно! ! !

  1. Пожалуйста, входитеviewsИмя папки!
    В этом запросе добавлена ​​проверка повторяющегося имени, при вводе повторяющегося имени будет запрашиваться и повторно вводиться имя папки. Сохранить пользовательский ввод вdirв переменной.

  2. Пожалуйста, входитеviewsназвание!
    Он ничем не отличается от предыдущей настройки, в основном для получения имени вновь созданного файла. сохранить в переменнуюnameсередина.

  3. Вам нужно отредактировать компонент всплывающего окна!
    Сохранить результаты выбора пользователя вhasDialog, так что вactionsв соответствии сhasDialogГенерация динамического сужденияaction.

  4. Вы хотите добавить файл конфигурации API?

Сохранить результаты выбора пользователя вhasApiв , то вactionsсудить в. Здесь вы можете напрямую выполнить настроенную команду для генерации. использовать здесьnodeсерединаchild_process.execкоманда выполнения функцииnpm run g api ${dir} ${name}Вот и все.

  1. добавить лиvuex mouduleдокумент?

та же причинаhasVuexзначение, выполнитьnpm run g vuex ${name}команда

Документация, связанная с child_process.exec

существуетactionsАтрибут может быть функцией, а параметр — входной переменной пользователя, которую нужно вернутьactionsмассив конфигурации.

После вышеуказанного запроса мы также получилиhasDialog , hasApi , hasVuex , name , dirсвязанные переменные. При этом также необходимо.hbsДинамически отображать некоторые фрагменты кода в файле шаблона.

Файлов шаблонов слишком много, поэтому я не буду их здесь выкладывать, только ключевые части.

// ./view/components.hbs
import { pagination } from '@/mixins'
{{#if hasApi}}
import { get{{properCase name}}List } from '@/api/{{kebabCase dir}}/{{kebabCase name}}'
{{/if}}
{{#if hasDialog}}
import { {{properCase name}}Dialog } from './components'
{{/if}}

export default {
  name: 'Role',
  {{#if hasDialog}}
  components: {
    {{properCase name}}Dialog
  },
  {{/if}}
  mixins: [pagination], // 封装分页相关函数
  data () {
    return {
      {{#if hasApi}}
      listApi: get{{properCase name}}List, // 列表请求地址
      {{/if}}
      searchForm: {}
    }
  },
  mounted () {
    {{#if hasApi}}
    this.getListData()
    {{/if}}
  },
  methods: {
    handleCheck (row) {
      {{#if hasDialog}}
      this.$refs.{{properCase name}}Dialog.openDialog(row, 'check')
      {{/if}}
    }
  }
}

Ниже приведены основные файлы конфигурации:

// ./view/index.js
const exec = require('child_process').exec
const componentExist = require('../utils/index')

module.exports = {
  description: 'views 页面',
  prompts: [
    {
      type: 'input',
      name: 'dir',
      default: 'container',
      message: '请输入 views 所在文件夹名称!',
      validate: value => {
        if ((/.+/).test(value)) {
          return componentExist(value) ? '组件名 或 views名已经存在' : true
        }
        return '请输入views 所在文件夹名称'
      }
    },
    {
      type: 'input',
      name: 'name',
      default: 'page',
      message: '请输入 views 名称!'
    },
    {
      type: 'confirm',
      name: 'hasDialog',
      default: true,
      message: '是否需要 编辑弹窗 组件?'
    },
    {
      type: 'confirm',
      name: 'hasApi',
      default: true,
      message: '是否添加 api 配置文件?'
    },
    {
      type: 'confirm',
      name: 'hasVuex',
      default: true,
      message: '是否添加 vuex moudule 文件?'
    }
  ],

  actions: data => {
    const { hasDialog, hasApi, hasVuex, name, dir } = data
    const actions = []

    actions.push({
      type: 'add',
      path: '../src/views/{{kebabCase name}}/{{properCase name}}.vue',
      templateFile: './view/view.hbs'
    })

    if (hasDialog) {
      actions.push({
        type: 'add',
        path: '../src/views/{{kebabCase name}}/components/{{properCase name}}Dialog.vue',
        templateFile: './view/dialog.hbs'
      })
      actions.push({
        type: 'add',
        path: '../src/views/{{kebabCase name}}/components/index.js',
        templateFile: './view/components.hbs'
      })
    }
    if (hasApi) {
      actions.push(data => {
        const { name } = data
        const cmd = `npm run g api ${dir} ${name}`
        exec(cmd, (err, res, stderr) => {
          if (err || stderr) return err || stderr
          process.stdout.write(res)
        })
        return '已添加 api 配置文件'
      })
    }
    if (hasVuex) {
      actions.push(_ => {
        const cmd = `npm run g vuex ${name}`
        exec(cmd, (err, res, stderr) => {
          if (err || stderr) {
            return err || stderr
          }
          process.stdout.write(res)
        })
        return '已添加 vuex modules 配置文件'
      })
    }

    return actions
  }
}

Пожалуйста, обратитесь к полному примеруадрес проектаКстати, прошу для начала

Два последних слова

Выше приведена простая конфигурация, шаблоны можно настраивать в соответствии с характеристиками проекта для повышения эффективности работы.
Если у вас есть лучшие предложения, добро пожаловать, чтобы оставить комментарий, мы можем общаться и учиться вместе и добиваться прогресса вместе. Если вы найдете это полезным после прочтения, добро пожаловать, лайкайте, комментируйте и делитесь! ! ! Спасибо! ! !

Кроме того, я также открыл личный публичный аккаунт, пожалуйста, обратите внимание! ! !

он может Добро пожаловать, чтобы обратить внимание! Так держать, если вам это нравится!
Категории