Установка и настройка среды разработки

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

Требования

Для работы с Marko требуется установленный Node.js версии не ниже 12. Также потребуется npm или yarn для управления зависимостями.

Установка Node.js

Для начала нужно скачать и установить последнюю версию Node.js с официального сайта: https://nodejs.org. Выбор версии зависит от предпочтений — LTS (Long Term Support) версия рекомендована для стабильной работы, но для использования последних фич можно выбрать Current.

После установки можно проверить правильность установки, набрав в командной строке:

node -v
npm -v

Эти команды выведут версии Node.js и npm, которые будут использованы в проекте.

Инициализация проекта

Для создания нового проекта с использованием Marko, рекомендуется использовать npm. Вначале нужно инициализировать проект командой:

npm init -y

Эта команда создаст файл package.json, который будет хранить метаданные проекта и зависимости.

Установка Marko

Далее следует установить сам фреймворк Marko. Это можно сделать через npm:

npm install marko

Также необходимо установить дополнительные инструменты для сборки и разработки. Самым простым вариантом является установка пакета для компиляции шаблонов:

npm install @marko/cli

Этот пакет предоставляет утилиту командной строки для работы с шаблонами Marko.

Структура проекта

После установки зависимостей рекомендуется создать базовую структуру проекта. Пример минимальной структуры:

/my-project
  /src
    /views
      index.marko
  package.json

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

Настройка инструментов для разработки

Для удобной работы с Marko можно настроить инструменты для автоматической компиляции шаблонов при изменении файлов. Используя @marko/cli, можно настроить скрипты для автоматического старта сервера.

Для этого откройте файл package.json и добавьте раздел “scripts”:

{
  "scripts": {
    "start": "marko dev"
  }
}

Команда marko dev запускает сервер, который автоматически компилирует шаблоны и обслуживает их на локальном хосте. После этого проект можно будет просматривать, открыв в браузере http://localhost:8080.

Настройка конфигурации Webpack

Если проект подразумевает более сложную сборку (например, использование JavaScript, CSS, изображений), стоит настроить Webpack. Для этого необходимо установить несколько дополнительных пакетов:

npm install webpack webpack-cli webpack-dev-server marko-loader

Добавление конфигурации Webpack для работы с Marko обычно включает настройку лоадеров для обработки .marko файлов и других ресурсов. Пример конфигурации webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.marko$/,
        loader: 'marko-loader'
      }
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true
  }
};

Этот файл конфигурации позволяет Webpack обрабатывать .marko файлы с помощью marko-loader и обслуживать результат через локальный сервер.

Настройка синтаксиса

Marko использует собственный синтаксис для создания шаблонов, который включает поддержку JavaScript, HTML и CSS. Для работы с этим синтаксисом рекомендуется настроить редактор, поддерживающий подсветку для .marko файлов. Для большинства популярных редакторов, таких как VS Code, существуют соответствующие расширения.

Для VS Code можно установить расширение Marko из официального магазина расширений, которое добавляет подсветку синтаксиса, автодополнение и другие удобства.

Оптимизация и сборка проекта

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

Для минимизации JavaScript и CSS можно использовать плагины, такие как TerserWebpackPlugin для JavaScript и MiniCssExtractPlugin для CSS.

Пример конфигурации для продакшн-режима:

const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: 'styles.css' }),
  ],
};

Дополнительные инструменты и пакеты

Существует ряд дополнительных инструментов и библиотек, которые могут облегчить работу с Marko. Например:

  • Marko-async — поддержка асинхронных операций внутри шаблонов.
  • Marko-stache — инструмент для работы с шаблонами в реальном времени.

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

Проверка работы

После настройки всех зависимостей и конфигураций, следует запустить сервер или сборку проекта. Если все настройки выполнены правильно, проект будет доступен по адресу http://localhost:8080.

Таким образом, основная задача при настройке среды разработки для работы с Marko — это установка Node.js, фреймворка Marko, настройка инструментов для сборки и создание конфигурации проекта.

Оглавление