Интерфейсная разработка === Webpack? Нет, позвольте мне рассказать вам, что такое фронтенд-инжиниринг!

Webpack
Интерфейсная разработка === Webpack? Нет, позвольте мне рассказать вам, что такое фронтенд-инжиниринг!

Обзор интерфейсной разработки

Определение фронтенд-инжиниринга и основные проблемы, которые необходимо решить

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

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

На этом фоне фронтенд-инжиниринг стал важной технологией, и в настоящее время это одна из необходимых технологий для фронтенд-разработки.

Технологии существуют для решения проблем, а проектирование переднего плана решает многие проблемы. Например, новый синтаксис ES6, инструменты CSS, такие как Less/Sass/PostCss, и модульность. Ни один из них не поддерживается напрямую средой выполнения. Но с помощью предварительной разработки их можно преобразовать в код, поддерживаемый средой выполнения.

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

Когда несколько человек сотрудничают, стиль кода и качество кода должны быть гарантированы.

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

Это области, за которые отвечает фронтенд-инжиниринг.

Подводя итог, можно сказать, что задачи, решаемые фронтенд-инжинирингом, в основном состоят из 6 частей.

  1. Недостатки традиционного языка или грамматики. (синтаксис ES6+, TypeScript, Sass)

  2. Нельзя использовать модуляризацию/компонентизацию (модули ES, компоненты)

  3. Повторяющаяся механическая работа (Build, Publish)

  4. Единый стиль кода, гарантия качества (git, ESLint)

  5. Зависит от поддержки интерфейса серверной службы (Mock)

  6. Общая зависимость от внутреннего проекта (DevServer)

технические характеристики

Все средства, направленные на повышение эффективности, снижение себестоимости и обеспечение качества, являются инженерными.

Вся повторяющаяся работа должна быть автоматизирована.

Общий процесс обычного фронтенд-проекта состоит примерно из 5 шагов:

Создать проект — Код — Предварительный просмотр/тестирование — Отправить — Развернуть

1. Создайте этап проекта:

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

2. Этап кодирования:

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

3. Этап предварительного просмотра/тестирования

Для процесса разработки требуются сервисы Mock и базовый веб-сервер для размещения проекта, например Nginx, Apatch и т. д. Но ни одна из этих служб не предоставляет возможности горячего обновления, поэтому для улучшения процесса разработки необходимы современные инструменты.

Если после компиляции преобразования возникает исключение, необходимо определить местоположение исходного кода. Это необходимость использования технологии Source Map для сопоставления исполняемого кода и исходного кода.

4. Этап отправки кода

Используйте git hooks для проверки всего проекта, включая проверки стиля кода и проверки качества проекта, чтобы гарантировать, что проблемный код не будет отправлен в репозиторий git, чтобы код в репозитории git всегда был доступен. Кроме того, формат git log может быть ограничен, что имеет большое значение при слиянии и откате веток кода.

Основные используемые инструменты — поэтапная и непрерывная интеграция.

5. Этап развертывания

CI/CD, автоматический выпуск.

Проект может быть автоматически упакован и загружен на ftp-сервер одной строкой команды.

Инженерия не равно инструменты

Некоторые инструменты в наши дни настолько мощны, например, Webpack, что многие люди думают, что фронтенд-инжиниринг означает webpack.

На самом деле, инструменты не являются ядром проектирования, но ядром проектирования является общее планирование и архитектура проекта. Инструменты — это всего лишь средство для достижения этого планирования и архитектуры.

Разработка проекта начинается с планирования общей структуры рабочего процесса проекта.

Например, структура файловой организации (многоуровневая по функциям, многоуровневая по бизнесу), парадигма разработки кода (синтаксис, спецификация, стандарт, язык, такой как ES6+, TypeScript и т. д.), разделение внешнего и внутреннего интерфейса (Ajax и средний уровень). ).

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

Вы можете учиться на идеях современных зрелых инженерных решений в отрасли, таких как create-react-app, vue-cli, angluar-cli, gatsby-cli и т. д.

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

Инжиниринг и Node.js

Нынешняя разработка интерфейса во многом связана с Node.js.

Node.js — это подрывная промышленная революция в области внешнего интерфейса после Ajax.Без Node.js сегодня не было бы внешнего интерфейса.

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

Короче говоря, инженерия существует для решения проблем.

Инструменты для строительных лесов

резюме

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

При разработке однотипного проекта будет много одинаковых вещей, в том числе:

организационная структура

парадигма развития

зависимости модулей

Конфигурация инструмента

базовый код

...

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

Например, процесс создания проектов с использованием больших IDE, таких как IDEA и Visual Studio, представляет собой рабочий процесс формирования шаблонов.

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

Общие инструменты для строительных лесов

Реагировать на проект: создать-реагировать-приложение

Проект Vue: vue-cli

Угловой проект: angular-cli

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

Другая категория — это инструменты для строительных лесов общего назначения, представленные как Yeoman. Преимущество в том, что он гибкий и легко расширяется.

Другая категория используется в процессе разработки проекта, например Plop. Он может создавать файлы определенного типа. Например, базовый код модуля или компонента.

Yeoman

yoman — один из старейших, самых мощных и самых универсальных инструментов формирования шаблонов, разработанный на основе node.js.

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

Мы можем определить наш собственный генератор для создания собственных строительных лесов проекта.

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

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

1. Установите йомен глобально. 
npm i -g yo

После установки yo вы можете проверить номер версии, чтобы убедиться, что установка прошла успешно.

yo --version
2. Установите генератор.

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

Например, необходимо установить проект узла.generator-node.

npm i -g generator-node
3. Запустите генератор с помощью команды yo.

После завершения установки вы можете создать проект узла.

Команда yo, за которой следует имя генератора. (имя пакета узла без генератора-)

yo node

В процессе создания проекта йомен задаст несколько вопросов и создаст различные структуры проекта с ответами, предоставленными пользователями.

Sub Generator

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

Запуск вспомогательного генератора также относительно прост, то есть yo плюс имя генератора, за которым следует двоеточие (:), и, наконец, имя вспомогательного генератора.

Например, создайте команду в проекте node.js.

yo node:cli

Краткое изложение шагов использования Yeoman

Он условно разделен на 6 шагов.

  1. Уточнить требования к проекту.
  2. Найдите подходящий генератор.
  3. Установить Генератор глобально.
  4. Запустите соответствующий Генератор через yo.
  5. Заполните параметры сборки в интерактивном режиме из командной строки.
  6. Создайте необходимую структуру проекта.

Пользовательский генератор

Поскольку в некоторых сценариях официальный генератор очень ограничен, нам необходимо настроить собственный генератор.

Создайте блок генератора

Генератор — это, по сути, модуль npm, который должен соответствовать только определенной структуре.

имя генератора должно бытьgenerator-<name>формат.

генератор должен иметь базовый класс для генераторов.

Общие этапы операции следующие.

Создайте корневой каталог проекта.

mkdir generator-sample

Инициализировать проект.

npm init -y

Установить йомен-генератор.

npm i yeoman-generator

Создайте определенные папки в соответствии со структурой проекта.

Входной файлgenerators/app/index.js.

Этот файл должен экспортировать класс, наследуемый от Yeoman Generator. Генератор Yeoman будет автоматически вызывать функции жизненного цикла в этом классе, когда он работает.

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

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

const Generator = require("yeoman-generator");

module.exports = class extends Generator {
  writing() {
    // 模版文件路径
    const tmpl = this.templatePath("foo.txt");
    // 输出目标路径
    const output = this.destinationPath("foo.txt");
    // 模板数据上下文
    const context = { title: "Hello", success: false };

    this.fs.copyTpl(tmpl, output, context);
  }
};

Для управления файлами можно использовать методы модуля this.fs, предоставленные в родительском классе. Эта fs отличается от нативной fs nodejs, она сильно инкапсулирована, поэтому она более мощная.

Создание файлов из шаблонов

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

Создайте папку шаблонов в каталоге генераторов/приложения, и файлы в этой папке являются файлами шаблонов. Можно получить методом this.templatePath.

Файл шаблона следует синтаксису EJS, то есть знаку процента в угловой скобке.

<%= name %>

Официальный сайт шаблона EJS: https://ejs.co/

Наконец, используйте метод this.fs.copyTpl, чтобы скопировать шаблон в целевой каталог.

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

Получать пользовательские входные данные

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

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

const Generator = require("yeoman-generator");

module.exports = class extends Generator {
  prompting() {
    // prompt 的参数是一个数组，可以发起多个问题
    // 每个问题都是以一个对象的形式体现
    // type 是问题的类型，input 代表需要用户来输入，除此以外还有单选、多选等。
    // name 是问题的 key
    // message 是问题的提示
    // default 是用户不做输入时的默认值
    return this.prompt([
      {
        type: "input",
        name: "name",
        message: "Your project name",
        default: this.appname,
      },
    ]).then((answers) => {
      // answers 会以一个对象的形式返回
      // { name: 'user input value' }
      // 将这个对象挂载到 this.answers
      this.answers = answers;
    });
  }
  writing() {
    // 模版文件路径
    const tmpl = this.templatePath("foo.txt");
    // 输出目标路径
    const output = this.destinationPath("foo.txt");
    // 将上下文对象替换为用户输入对象
    const context = this.answers;

    this.fs.copyTpl(tmpl, output, context);
  }
};

Кейс проекта Vue Generator

Во-первых, вы можете сгенерировать базовый скелет проекта vue через vue-cli, а затем использовать этот скелет в качестве базового шаблона. Места, которые необходимо заменить переменными, заменяются синтаксисом EJS.

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

Конкретные шаги не показаны.

Опубликовать генератор

Процесс публикации генераторов такой же, как и у обычных пакетов npm.npm publishзаказ опубликовать.

Если вы хотите, чтобы вас официально включили в список yoman, вам нужно добавить yoman-generator к ключевому слову.

Plop

В дополнение к большим инструментам для строительных лесов, таким как yoman, существует множество маленьких и красивых инструментов для строительных лесов, таких как Plop.

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

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

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

.
|____Footer
| |____Footer.tsx
| |____Footer.scss
| |____Footer.test.ts

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

Использование шлепка

Сначала добавьте в проект plop.

npm install --save-dev plop

Создайте файл plopfile.js в корневом каталоге проекта, который является входным файлом, необходимым для работы plop.

Простая конфигурация plopfile.js выглядит следующим образом:

// 导出一个函数
// 该函数需要接收一个 plop 对象参数
module.exports = (plop) => {
  // 调用 setGenerator 方法
  // 第一个参数是命令名，第二个参数是配置对象
  plop.setGenerator("component", {
    description: "create a component", // 说明
    // 询问
    prompts: [
      {
        type: "input",
        name: "name",
        message: "component name",
        default: "MyComponent",
      },
    ],
    // 动作
    actions: [
      {
        type: "add", // 添加文件
        // 使用 {{ }} 语法拿到上面询问的值
        path: "src/components/{{name}}/{{name}}.tsx",
        // 模板的文件路径
        templateFile: "plop-templates/component.hbs",
      },
      // 添加 scss 文件和 test 文件
      {
        type: "add", // 添加文件
        // 使用 {{ }} 语法拿到上面询问的值
        path: "src/components/{{name}}/{{name}}.scss",
        // 模板的文件路径
        templateFile: "plop-templates/component.scss.hbs",
      },

      {
        type: "add", // 添加文件
        // 使用 {{ }} 语法拿到上面询问的值
        path: "src/components/{{name}}/{{name}}.test.ts",
        // 模板的文件路径
        templateFile: "plop-templates/component.test.ts.hbs",
      },
    ],
  });
};

Приведенный выше файл hbs следует синтаксису рулей, см.: https://handlebarsjs.com/

Шаблоны обычно хранятся в папке plop-templates в корневом каталоге.

Наконец, вы можете запустить скрипт plop с помощью команды.

npx plop component

Подводя итог, есть 5 шагов, чтобы использовать plop.

  1. Установите модуль plop в качестве зависимости разработки проекта.
  2. Создайте файл plopfile.js в корневом каталоге проекта.
  3. Определите задачи создания шаблонов в файле plopfile.js.
  4. Напишите шаблоны для создания определенных типов файлов.
  5. Запускайте задачи создания шаблонов через интерфейс командной строки, предоставляемый Plop.

Как работает скаффолдинг и простая демонстрационная разработка

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

Идеи для разработки строительных лесов:

  1. Задавайте вопросы клиентам в интерактивном режиме через командную строку.

  2. Сгенерируйте файл на основе результатов ответов пользователя.

Создайте папку проекта строительных лесов.

mkdir sample-scaffolding

Инициализировать проект.

npm init -y

Добавьте поле bin в package.json, чтобы определить файл входа для cli.

{
  "bin": "cli.js"
}

Создайте cli.js.

touch cli.js

Поскольку вам нужно спросить пользователя на консоли, вам нужно использовать библиотеку nodejs, inquirer.

npm i --save-dev inquirer

Кроме того, вам нужно использовать механизм шаблонов для ввода переменных в файл шаблона, поэтому вам нужно использовать ejs.

npm i ejs

Теперь логику можно писать на cli.js.

#!/usr/bin/env node

const fs = require("fs");
const path = require("path");
const inquirer = require("inquirer");
const ejs = require("ejs");

// 执行命令后，直接发起询问。
inquirer
  .prompt([
    {
      type: "input",
      name: "name",
      message: "Project name?",
    },
  ])
  .then(
    // 返回值 anwsers 是一个对象
    (anwsers) => {
      // 模板目录
      const tmplDir = path.join(__dirname, "templates");
      // 目标目录
      const destDir = process.cwd();
      // 将模板目录下的所有模板文件通过模板引擎转换后复制到目标目录中
      fs.readdir(tmplDir, (err, files) => {
        if (err) throw err;
        // 遍历所有模板文件
        files.forEach((file) => {
          // 通过 ejs 渲染文件
          ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {
            if (err) throw err;
            // 将 ejs 渲染后的文件写入目标文件中
            fs.writeFileSync(path.join(destDir, file), result);
          });
        });
      });
    }
  );

первая строка#!/usr/bin/env nodeзаключается в том, чтобы сообщить системе, что файл выполняется через node.

Далее создайте папку шаблонов.

mkdir templates

Создайте файлы шаблонов index.html и style.css.

Содержимое index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= name %></title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    hello, world!
  </body>
</html>

Содержимое style.css:

body {
  background-color: #ddffdd;
  color: #060606;
}

Связать команду глобально.

npm link

На данный момент была разработана простая демонстрация строительных лесов.

Теперь, чтобы начать тестирование, перейдите в другой каталог и создайте каталог проекта.

mkdir test-project

Войдите в каталог и выполните команду scaffolding.

sample-scaffolding

В этот момент в командной строке появится запрос, введите имя проекта, и вы сможете увидеть сгенерированный файл.

? Project name? hello

напиши в конце

Инструменты скаффолдинга — это первая часть фронтенд-инжиниринга. Это конец объяснения. Далее будет выпущено несколько других статей по фронтенд-инжинирингу, так что следите за обновлениями.

- END -

Категории