Мощный синтаксис glob для интерфейсной разработки

Node.js

Glob существовал до регулярных выражений, в основном используемых для сопоставления путей к файлам, таких как знаменитыйgulpОн использует правила GLAC, чтобы соответствовать, найти и обработать файлы с различными суффиксами. В процессе фронтальной техники Node.js неизбежно будет использоваться для чтения файлов, например, чтобы найтиsrcвсе в каталогеjsа такжеjsxфайл, как должен быть написан код? Сначала установите зависимости:

yarn add glob

Затем это делают 3 строки кода:

const glob = require('glob')
const files = glob.sync('src/**/*.js{,x}')
console.log(files)

Вы чувствуете себя сильным? Что еще более важно, синтаксис glob поддерживается в командной строке и не требует установки каких-либо зависимостей.Например, босс просит вас создатьa1.jsприбытьa9.js,b1.jsприбытьb9.jsКак работать с этими 18 тестовыми файлами? Глупо создавать по одному, glob может сделать это одним предложением:

$ touch {a,b}{1..9}.js
$ ls
a1.js a3.js a5.js a7.js a9.js b2.js b4.js b6.js b8.js
a2.js a4.js a6.js a8.js b1.js b3.js b5.js b7.js b9.js

Что еще более важно, синтаксис glob очень прост, если вы помните значение следующих семи символов, вы можете его освоить:

  • Основной синтаксис:/,*,?,[]
  • Расширенный синтаксис:**,{},()

Далее я объясню один за другим:

Базовая грамматика

Разделители и фрагменты

концепция: Разделитель есть/,пройти черезsplit('/')Каждый элемент результирующего массива является фрагментом.

Пример:

  • src/index.jsЕсть два сегмента, которыеsrcа такжеindex.js
  • src/**/*.jsЕсть три сегмента, которыеsrc,**а также*.js

одиночная звездочка

концепция: одна звездочка*Используется для сопоставления нуля или более символов в одном фрагменте.

Пример:

  • src/*.jsвыражатьsrcВсе каталоги, начинающиеся сjsконец файла, но не может соответствоватьsrcфайлы в подкаталогах, напримерsrc/login/login.js
  • /home/*/.bashrcСовпадение со всеми файлами .bashrc пользователей

должны знать о том,*не может соответствовать разделителю/, что означает, что символы не могут сопоставляться между фрагментами.

вопросительный знак

концепция:вопросительный знак?Совпадение с одним символом в одном фрагменте.

Пример:

  • test/?at.jsсоответствовать какtest/cat.js,test/bat.jsи т.д. все 3 символа и последние две цифрыatjs файл, но не может соответствоватьtest/flat.js
  • src/index.??соответствоватьsrcКаталог начинается с индекса, а имя суффикса представляет собой двухсимвольный файл, например, он может совпадатьsrc/index.jsа такжеsrc/index.md, но не совпадаетsrc/index.jsx

Кронштейны

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

Пример:

  • test/[bc]at.jsможет только соответствоватьtest/bat.jsа такжеtest/cat.js
  • test/[c-f]at.jsможет соответствоватьtest/cat.js,test/dat.js,test/eat.jsа такжеtest/fat.js

восклицательный знак

концепция: Указывает отрицание, то есть исключает те файлы, которые могут быть сопоставлены после удаления восклицательного знака.

Пример:

  • test/[!bc]at.jsне может соответствоватьtest/bat.jsа такжеtest/cat.js, но может соответствоватьtest/fat.js
  • !test/tmp/**'исключатьtest/tmpВсе каталоги и файлы в каталоге

расширенный синтаксис

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

две звездочки

концепция: две звездочки**Может совпадать с нулем или более символов во фрагментах, то есть**Он рекурсивно сопоставляет все файлы и каталоги, если за ним стоит разделитель, т.е.**/Если это так, это означает, что только рекурсивно соответствуют все каталоги (за исключением скрытых каталогов).

Пример:

  • /var/log/**соответствовать/var/logВсе файлы и папки в каталоге, а также все подфайлы и подпапки в папке
  • /var/log/**/*.logсоответствовать/var/logи все подкаталоги с.logконец файла
  • /home/*/.ssh/**/*.keyсоответствует всем пользователям.sshкаталог и его подкаталоги, начинающиеся с.keyконец файла

большие скобки

концепция: Соответствует всем шаблонам в фигурных скобках, разделенных запятыми, поддерживает вложенные фигурные скобки, поддерживает использование..соответствует последовательным символам, т.е.{start..end}грамматика.

Пример:

  • a.{png,jp{,e}g}соответствоватьa.png,a.jpg,a.jpeg
  • {a..c}{1..2}соответствоватьa1 a2 b1 b2 c1 c2

Уведомление:{}а также[]Есть одно важное отличие: если соответствующий файл не существует,[]потеряет функцию шаблона и станет простой строкой, а{}еще можно расширить.

Круглые скобки

концепция: круглые скобки должны следовать?,*,+,@,!используется позже, а содержимое в скобках представляет собой группу|Набор шаблонов для разделителей, например:abc|a?c|ac*.

Пример:

  • ?(pattern|pattern|pattern): Сопоставьте данный шаблон 0 или 1 раз
  • *(pattern|pattern|pattern): соответствует заданному шаблону 0 или более раз
  • +(pattern|pattern|pattern): соответствует заданному шаблону 1 или более раз
  • @(pattern|pattern|pattern): Строгое соответствие заданному образцу
  • !(pattern|pattern|pattern): соответствует не заданному шаблону

Сценарии применения

Автоматическая настройка упаковки многостраничного приложения Webpack

В проекте веб-пакета, если у нас есть несколько записей, каждая запись имеетindex.htmlшаблоны иindex.jsфайл, и эта запись меняется динамически, я не хочу менять каждый раз, когда добавляется записьwebpack.config.jsконфигурационный файл, что мне делать?

На этом этапе вы можете согласиться с папкой, созданной в src, если естьindex.js, мы упаковываем его как входной файл:

src
├── detail
│   ├── index.html
│   └── index.js
├── home
│   ├── index.html
│   └── index.js
├── login
│   ├── index.html
│   └── index.js
├── shop
│   ├── index.html
│   └── index.js

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

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const glob = require('glob')

// 动态生成 entry 和 html-webpack-plugin
function getMpa() {
  const entry = {}, htmlPlugins = []
  const files = glob.sync('src/*/index.js')
  files.forEach((file) => {
    const filename = file.split('/')[1]
    entry[filename] = path.join(__dirname, file)
    htmlPlugins.push(
      new HtmlWebpackPlugin({
        template: path.join(__dirname, `src/${filename}/index.html`),
        filename: `${filename}.html`,
        chunks: [filename],
      })
    )
  })
  return { entry, htmlPlugins }
}
const mpa = getMpa()

// 动态的配置文件
module.exports = {
  entry: mpa.entry,
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]-[hash:6].js',
  },
  plugins: [...mpa.htmlPlugins],
}

Таким образом, независимо от того, сколько записей добавлено,webpack.config.jsНет необходимости менять.

Напишите инфраструктуру Node.js с соглашениями больше, чем с конфигурацией

egg.jsЭто отличная среда разработки корпоративного уровня Node.js, в которой применяется идея соглашения, а не конфигурации, например:

  • По соглашению промежуточное программное обеспечение размещается вapp/middlewareотдельные файлы в каталоге
  • согласованныйapp/router.jsфайл для унификации всех правил маршрутизации
  • Согласовано, что Сервисный файл должен быть размещен вapp/serviceКаталог, который может поддерживать многоуровневые каталоги и может быть доступен через каскадные имена каталогов при доступе.

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

function load(folder, options) {
    const extname = options.extname || '.{js,ts}'
    return glob.sync(require('path').join(folder, `./**/*.js`)).forEach((item) => require(item))
}

Используя glob с соответствующими спецификациями, такими как RESTful, мы также можем инкапсулировать простой, основанный на соглашениях фреймворк Node.js.

Категории