🛠Как быстро разработать собственный проект строительных лесов?

внешний интерфейс
🛠Как быстро разработать собственный проект строительных лесов?

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

введение

Ниже приведен типичный пример использования скаффолдинга для инициализации проекта.

С углублением концепции фронтенд-инжиниринга все больше и больше людей предпочитают использовать строительные леса для создания собственных проектов с нуля до единицы. Наиболее знакомым из них являетсяcreate-react-appа такжеvue-cli, они могут помочь нам инициализировать конфигурацию, сгенерировать структуру проекта, автоматически установить зависимости и, наконец, мы можем запустить проект, чтобы начать разработку с помощью одной строки инструкций, или собрать проект.

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

  • После оптимизации производительности упаковки Webpack путем настройки плагинов и конфигураций
  • Удалите некоторые функции, созданные с помощью скаффолдинга.
  • Корректировка структуры проекта
  • Инструменты разработки компании Fusion
  • ...

В общем, по мере развития бизнеса мы склонны разрабатывать более «индивидуальный» бизнес-план. В настоящее время наш самый прямой подход заключается в разработке каркаса решения, чтобы эти передовые методы и решения можно было повторно использовать в будущем.

1. Как работают строительные леса?

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

  • Инициализация, как правило, в это время среда будет инициализирована и будут выполнены некоторые предварительные проверки.
  • Пользовательский ввод, например, при использовании vue-cli, он «попросит» вас указать множество параметров конфигурации.
  • Создать файл конфигурации
  • Создайте структуру проекта, для этого может использоваться шаблон проекта.
  • Установить зависимости
  • Отделочные работы, такие как очистка, проверка и т.д.

Кроме того, вам нужно будет иметь дело с поведением командной строки и т. д. Часто мы просто хотим создать легкий и быстрый каркас для конкретной сцены (не такой полный, как vue-cli). И для того, чтобы быстро создать леску, нам не нужно начинать с нуля.YeomanЭто инструмент, который может помочь нам быстро создать строительные леса.

Многие студенты могут мало знать об этом, поэтому давайте кратко представим, что такое Yeoman и как помочь нам упростить строительство строительных лесов.

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

Если вам не особо понятна связь между ними, можно привести небольшой пример:

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

Порядок выполнения встроенных методов «жизненного цикла» Yeoman следующий:

  1. initializing
  2. prompting
  3. default
  4. writing
  5. conflicts
  6. install
  7. end

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

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

Благодаря этим двум пунктам Йоман может помочь нам значительно стандартизировать и упростить разработку строительных лесов.

2. Разработайте свои собственные леса

Зная, как работают некоторые строительные леса и основные концепции Yeoman, мы можем создать свои собственные строительные леса. Например, функция этого скаффолда очень проста, он создаст для нас минимальный интерфейсный проект на основе Webpack. Окончательный эффект лесов выглядит следующим образом:

2.1. Подготовьте шаблон проекта

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

Во-первых, это заполнение переменных в шаблоне.

Некоторое содержимое файла в шаблоне может потребовать динамической замены при создании, например, динамическое заполнение в соответствии с содержимым, введенным пользователем в терминале.package.jsonсерединаnameстоимость. И Йомен имеет встроенныйejsВ качестве механизма шаблонов его можно использовать напрямую.

Во-вторых, размещение шаблона.

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

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

Ставить второй шаблон локально или удалённо зависит от вашего личного бизнес-сценария.Разные сценарии имеют разные требования к ограничениям.Я писал ранее,что шаблон ставится на локальный скаффолдинг (т.е. устанавливается через npm вместе со скаффолдингом),также писал о хостинге в репозитории git таким образом.

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

2.2.Создание генератора (yoman-generator)

Создание генератора Yeoman должно следовать его правилам.

Во-первых, это соглашение об именах генераторов. нужно начать сgeneratorГолову соединить горизонтальной линией. Например, если вы хотите создать генератор с именем webpack-kickoff, имя пакета должно бытьgenerator-webpack-kickoff.

Таким образом, когда вы проходите

npm i -g yo

После установки интерфейса командной строки Yeoman к нему можно получить доступ черезyoКоманда для использования генератора для запуска строительных лесов:

yo webpack-kickoff

Webpack-kickoff здесь находится в названии пакетаgenerator-В следующем контенте Yeoman будет искать подходящие пакеты по всему миру в соответствии с этим правилом.

Во-вторых, согласно спецификации Йомена, по умолчанию вам нуженgenerators/app/Создано в каталогеindex.js, где вы пишете свой рабочий процесс создания лесов. Конечно, можно иИзмените конфигурацию, чтобы расширить или изменить это правило..

Кроме того, класс генератора, который вы создаете, должен расширять yoman-generator. так что мы будемgenerators/app/index.jsНапишите следующий код в:

const Generator = require('yeoman-generator');
class WebpackKickoffGenerator extends Generator {
    constructor(params, opts) {
        super(params, opts);
    }
}
module.exports = WebpackKickoffGenerator;

Помните упомянутый ранее метод «жизненного цикла»? Включает инициализацию, запрос, установку по умолчанию, запись, конфликты, установку и завершение. Кромеdefault, все остальные представляют метод с тем же именем в генераторе, все, что вам нужно, это соответствующий метод, который нужно переопределить в подклассе.defaultФаза выполняет определенные пользователем методы класса.

Например, если вы хотите распечатать информацию о версии при инициализации, вы можете сделать:

const Generator = require('yeoman-generator');
class WebpackKickoffGenerator extends Generator {
    constructor(params, opts) {
        super(params, opts);
    }
    
    initializing() {
        const version = require('../../package.json').version;
        this.log(version);
    }
}
module.exports = WebpackKickoffGenerator;

Видно, что оставшаяся работа заключается в заполнении деталей реализации различных методов в классе WebpackKickoffGenerator.

2.3. Обработка взаимодействия с пользователем

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

можно использоватьInquirer.jsреализовать. И Yeoman уже интегрировал его для нас, вызвав прямо в генератореthis.promptВот и все.

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

class WebpackKickoffGenerator extends Generator {
    // ……
    prompting() {
        const done = this.async();

        const opts = [{
            type: 'input',
            name: 'dirName',
            message: 'Please enter the directory name for your project：',
            default: 'webpack-app',
            validate: dirName => {
                if (dirName.length < 1) {
                    return '⚠️  directory name must not be null！';
                }
                return true;
            }
        }];

        return this.prompt(opts).then(({dirName}) => {
            this.dirName = dirName;
            done();
        });
    }
    // ……
}

Обратите внимание, что, поскольку взаимодействие с пользователем является «асинхронным» поведением, чтобы последующие методы жизненного цикла продолжали выполняться после «асинхронного» завершения, необходимо вызватьthis.async()Способ уведомления о том, что метод представляет собой асинхронный метод, чтобы избежать непосредственно вызова следующего этапа метода жизненного цикла после выполнения синхронного кода последовательно. Функция возвращается после вызова, и выполнение функции указывает на то, что этап завершен.

2.4. Скачать шаблон

Как упоминалось в 2.1., мы решили разместить шаблон вgithubПоэтому перед генерацией конкретного кода проекта необходимо скачать соответствующие файлы. можно использоватьdownload-git-repoреализовать быстро.

class WebpackKickoffGenerator extends Generator {
    // ……
    _downloadTemplate() {
        return new Promise((resolve, reject) => {
            const dirPath = this.destinationPath(this.dirName, '.tmp');
            download('alienzhou/webpack-kickoff-template', dirPath, err => {
                if (err) {
                    reject(err);
                    return;
                }
                resolve();
            });
        });
    }
    // ……
}

Здесь мы используемthis.destinationPath()метод, который в основном используется для получения пути. Если параметры не переданы, возвращается каталог, в котором запущена текущая командная строка; если получено несколько параметров, путь будет объединен.

Кроме того, если вы будете осторожны, вы найдете_downloadTemplate()Перед методами ставится знак подчеркивания. Это соглашение в Йомене: приказ о казни Йомена имеетdefaultstage, который содержит все определяемые пользователем методы класса. Однако, если вы не хотите, чтобы некоторые методы вызывались непосредственно процессом создания шаблонов Yeoman, но предоставляются в качестве служебных методов другим методам класса, вы можете добавить префикс подчеркивания. Для этого именованного методаdefaultстадия игнорируется.

2.5 Копия файла шаблона

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

class WebpackKickoffGenerator extends Generator {
    // ……
    _walk(filePath, templateRoot) {
        if (fs.statSync(filePath).isDirectory()) {
            fs.readdirSync(filePath).forEach(name => {
                this._walk(path.resolve(filePath, name), templateRoot);
            });
            return;
        }

        const relativePath = path.relative(templateRoot, filePath);
        const destination = this.destinationPath(this.dirName, relativePath);
        this.fs.copyTpl(filePath, destination, {
            dirName: this.dirName
        });
    }
    // ……
}

используется здесьthis.fs.copyTpl()Метод поддерживает копирование файлов, а также может указывать соответствующие параметры шаблона, кроме того, при наличии дублирующего покрытия имен соответствующая информация будет автоматически выведена в консоль.

Наконец, интегрируйте загрузку и копирование для завершенияwritingсцена.

class WebpackKickoffGenerator extends Generator {
    // ……
    writing() {
        const done = this.async();
        this._downloadTemplate()
            .then(() => {
                const templateRoot = this.destinationPath(this.dirName, '.tmp');
                this._walk(templateRoot, templateRoot);
                fs.removeSync(templateRoot);
                done();
            })
            .catch(err => {
                this.env.error(err);
            });
    }
    // ……
}

2.6. Установка зависимостей

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

Йомен также предоставляетthis.npmInstall()Способ реализации установки пакета NPM:

class WebpackKickoffGenerator extends Generator {
    // ……
    install() {
        this.npmInstall('', {}, {
            cwd: this.destinationPath(this.dirName)
        });
    }
    // ……
}

На этом основная функция строительных лесов завершена. Вы уже можете использовать наш генератор для быстрого создания проектов. Это очень просто~

Полный код может относиться кgenerator-webpack-kickoff.

3. Используйте строительные леса 🚀

Для использования этого каркаса требуются как Yeoman, так и генератор yoman-генератора, который мы только что создали выше. Конечно, есть предположение, что и Yeoman, и этот генератор нужно устанавливать глобально. Нет ничего плохого в том, чтобы установить Yeoman глобально (npm install -g yo), может быть несколько способов обработки generate-webpack-kickoff:

  1. Публикуйте напрямую в npm, а затем устанавливайте глобально, как обычно.
  2. Вручную скопируйте непосредственно в глобальные node_modules
  3. использоватьnpm linkСвязать каталог с глобальным

Согласно разделу 2.2., имя нашего генератора — генератор-вебпак-кикофф. Поскольку мой пакет был отправлен в npm, чтобы использовать скаффолдинг, я могу запустить следующую команду:

# 安装一次即可
npm i -g yo
npm i -g generator-webpack-kickoff

# 启动脚手架
yo webpack-kickoff

4. Оптимизация

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

  • Обнаружение повторяющегося имени каталога проекта, при создании проекта проверьте, существует ли уже каталог, и запросите предупреждение.
  • Кэш шаблонов проектов. Хотя мы используем метод хостинга github, мы также можем учитывать, что нам не нужно каждый раз повторно загружать, мы можем поставить локальный кеш и обновлять его каждый день или каждую неделю;
  • Оптимизация CLI.полная версияТакже будут более богатые возможности использования CLI, такие как эффект загрузки, который мы видим в анимации, информационная панель, отображаемая в начале и в конце, и так далее. Эти инструменты включают
    • ora, используемый для создания счетчика, который представляет собой эффект загрузки, упомянутый выше.
    • chalk, для печати информации в цвете
    • update-notifier, проверять онлайн и локальные версии пакетов
    • beeper, может "пищать" вам, например, когда что-то пойдет не так
    • boxen, чтобы создать эту маленькую "панель" в голове и хвосте
  • проверка версии. упомянутое выше может быть использованоupdate-notifierчтобы проверить версию. Таким образом, на этапе инициализации можно выполнить проверку версии, предлагая пользователю обновить скаффолдинг.

наконец

В этой статье на простом примере показано, как использовать Yeoman для быстрого создания строительных лесов. Чтобы узнать больше о разработке и использовании yoman-generator, вы можете обратиться кРазличные генераторы, написанные всеми участниками сообщества. На данный момент на npm более 8000 генераторов йоменов, возможно, найдется что-то для вас.

Пожалуйста, смотрите код, заполненный в текстеgenerator-webpack-kickoff.

Категории