автор:Индигоиз Thunder Front End
Оригинальный адрес:зеленые волосы VO.GitHub.IO/blog/docs/0…
При создании нового проекта нам обычно нужно спроектировать структуру каталогов, настроить различные конфигурации, обработать упаковку и компиляцию, и делать все заново каждый раз, когда мы создаем новый проект, или делать копию исходного проекта, а затем изменять его. . Можете ли вы сами написать шаблон, а затем поддерживать персонализированное автоматическое создание? Сегодня я поделюсь с вами тем, как настроить набор строительных лесов для вашего собственного проекта, чтобы повысить эффективность разработки.
Здесь вам нужно представить концепцию лесов, что такое леса? Леса - это как шаблон с проектом, может помочь нам быстро начать проект, как Vue-CLI, предоставляя интерфейс взаимодействия терминала для настройки содержимого проекта.
Представляем Йоман
Yeoman — это общая система поддержки, которая позволяет создавать приложения любого типа (Web, Java, Python, C# и т. д.). Написать строительные леса с помощью йомена очень просто, yeoman предоставляет yoman-generator для быстрого создания шаблона строительных лесов.Наша основная задача — написать файл шаблона. Теперь давайте воспользуемся yoman для написания шаблона для создания javascript-плагинов.
Особенности подмостей:
- Автоматическая компиляция и упаковка сборки
- Поддержка синтаксиса es6
- Поддержка модульного тестирования
- Поддержка jsdoc для создания документации
- Поддержка синтаксиса ESLINT
- Автоматически генерировать журнал изменений
Готов к работе
Для начала нужно установить йо и генератор-генератор глобально
npm install yo -g
npm install generator-generator -g
Создание шаблонов строительных лесов
yo generator
Введите имя проекта, описание и другую информацию о проекте в этом терминальном интерфейсе. Обратите внимание, что имя проекта должно быть написано какgenerator-xxxформате, чтобы пользователи могли передаватьyo xxxУстановите свои леса.
Сгенерированная структура каталогов шаблона скаффолда выглядит следующим образом:
.
├── generators/
│ └── app/
│ ├── index.js
│ └── templates/
│ └── dummyfile.txt
├── .editorconfig
├── .eslintignore
├── .gitattributes
├── .gitignore
├── .travis.yml
├── .yo-rc.json
├── LICENSE
├── README.md
├── package.json
└── __tests__/
└── app.js
Далее мыgenerators/app/index.jsНапишите логику строительных лесов.
Напишите свои собственные леса
Что делает подставка:
- получать пользовательский ввод
- Создание файлов шаблонов на основе пользовательского ввода
- Скопируйте файл шаблона в целевой каталог (обычно это каталог, в котором пользователь запускает скаффолд)
- Установить зависимости
yoman предоставляет базовый генератор, который вы можете расширить для реализации собственного поведения. Этот базовый генератор сделает большую часть работы за вас. В файле генератора index.js показано, как расширить базовый генератор:
var Generator = require("yeoman-generator");
module.exports = class extends Generator {};
Порядок выполнения функций жизненного цикла йомена следующий:
- initializing - функция инициализации
- подсказка - этап для получения пользовательского ввода
- Настройка - Сохранить информацию о конфигурации и файлам
- по умолчанию - выполнить пользовательскую функцию
- написание - Фаза создания структуры каталога проекта
- конфликты - унифицированная обработка конфликтов, например, существует ли файл, который должен быть сгенерирован, или нет, перезаписан и т. д.
- install - этап установки зависимостей
- end - конечный этап генератора
Обычно мы используем четыре функции жизненного цикла: инициализация, запрос, установка по умолчанию, запись и установка. Взгляните на пример ниже:
"use strict";
const Generator = require("yeoman-generator");
const chalk = require("chalk"); // 让console.log带颜色输出
const yosay = require("yosay");
const mkdirp = require("mkdirp"); // 创建目录
module.exports = class extends Generator {
initializing() {
this.props = {};
}
// 接受用户输入
prompting() {
// Have Yeoman greet the user.
this.log(
yosay(
`Welcome to the grand ${chalk.red(
"generator-javascript-plugin"
)} generator!`
)
);
const prompts = [
{
type: "confirm",
name: "someAnswer",
message: "Would you like to enable this option?",
default: true
}
];
return this.prompt(prompts).then(props => {
// To access props later use this.props.someAnswer;
this.props = props;
});
}
// 创建项目目录
default() {
if (path.basename(this.destinationPath()) !== this.props.name) {
this.log(`\nYour generator must be inside a folder named
${this.props.name}\n
I will automatically create this folder.\n`);
mkdirp(this.props.name);
this.destinationRoot(this.destinationPath(this.props.name));
}
}
// 写文件
writing() {
// 将templates目录的代码拷贝到目标目录
// templates目录默认路径是generators/app/templates
this.fs.copy(
this.templatePath("dummyfile.txt"),
this.destinationPath("dummyfile.txt")
);
this._writingPackageJSON();
}
// 以下划线_开头的是私有方法
_writingPackageJSON() {
// this.fs.copyTpl(from, to, context)
this.fs.copyTpl(
this.templatePath("_package.json"),
this.destinationPath("package.json"),
{
name: this.props.name,
description: this.props.description,
keywords: this.props.keywords.split(","),
author: this.props.author,
email: this.props.email,
repository: this.props.repository,
homepage: this.props.homepage,
license: this.props.license
}
);
}
// 安装依赖
install() {
this.installDependencies();
}
};
Напишите код шаблона
Ранее мы написали базовый фреймворк скаффолдинга, он может принимать пользовательский ввод, записывать файлы и устанавливать зависимости, но как использовать вводимые пользователями данные? Написать в какой файл? Какие зависимости установлены? Это все, что делают файлы шаблонов. Теперь начнем основную часть: написание файла шаблона.
Файл шаблона — это демонстрация проекта, которую вы создаете для пользователей. Пусть пользователи посмотрят эти примеры кода и начнут работать. Пользователям нужно сосредоточиться только на бизнес-логике, независимо от упаковки и сборки.
Сначала создайте каталог шаблонов:
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .babelrc
├── jsdoc.json
├── README.md
├── package.json
├── build/
└── rollup.js
├── src/
└── index.js
├── test/
└── index.js
наш шаблонpackage.jsonЭти команды были написаны в:
"scripts": {
"prebuild": "npm run lint && npm run test && npm run doc",
"build": "node ./build/rollup.js",
"lint": "eslint --ext .js, src",
"test": "mocha --require babel-register --require babel-polyfill --bail",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
"doc": "jsdoc -c ./jsdoc.json"
}
-
npm run lintИспользуйте eslint для проверки синтаксиса, чтобы избежать синтаксических ошибок и унифицировать стиль кода перед компиляцией. -
npm testзапускать модульные тесты -
npm run docСоздание документации из комментариев -
npm run changelogв соответствии сgit logСоздавайте журнал проекта, меняйте записи одним взглядом -
npm run prebuildПроверка синтаксиса перед компиляцией, запуск тестов, создание документации -
npm run buildСкомпилировать и упаковать
мы можем использовать<%= name %>Такой синтаксис шаблона использует скаффолдинг вcontextКонтекст, будь то данные, введенные пользователем, или собственные переменные программы:
{
"name": "<%= name %>",
"description": "<%= description %>",
"version": "1.0.0",
"private": false,
"main": "dist/<%= name %>.umd.js",
"module": "dist/<%= name %>.es.js"
}
Подробный код см.githubПроверять.
запускать тестовые случаи
Чтобы гарантировать надежность кода, мы должны проводить модульные тесты. На самом деле мы используемgeneratorВ сгенерированном коде скаффолдинга уже есть примеры тестового кода, и вы можете протестировать нашу логику скаффолдинга, изменив ее на свою собственную логику. Теперь давайте проверим, сгенерирован ли файл:
'use strict';
const path = require('path');
const assert = require('yeoman-assert');
const helpers = require('yeoman-test');
describe('generator-javascript-plugin:app', () => {
beforeAll(() => {
return helpers
.run(path.join(__dirname, '../generators/app'))
.withPrompts({ someAnswer: true });
});
it('creates files', () => {
assert.file(['build/rollup.js']);
assert.file(['dist']);
assert.file(['src']);
assert.file(['test']);
assert.file(['package.json']);
assert.file(['.babelrc']);
...
});
});
Выполнение заказа
npm test
запустить строительные леса
На данный момент наши леса разработаны, и затем мы действительно запустим их, чтобы увидеть, правильно ли они работают.
Поскольку наш скаффолдинг все еще разрабатывается локально, он пока недоступен в виде глобального модуля npm. Мы можем использовать npm для создания глобальных модулей и их символической ссылки на локальные модули. Запустите в корневом каталоге проекта:
npm link
Так что вы можете позвонитьyo javascript-pluginЗапустите строительные леса сейчас. Вы можете увидеть запущенный процесс в терминале.
выпуск
Только когда письменный скаффолд будет выпущен, его смогут использовать больше людей Публикация скаффолда аналогична публикации других пакетов npm.Как опубликовать?
гитхаб-адрес
generator-javascript-pluginЭти леса были размещены наnpm, вы можете загрузить или получить доступ к исходному коду.
Адрес источника:GitHub.com/green отправляет VO/a…