Конфигурация проекта

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

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

Перед началом работы с Marko, важно настроить проект с использованием современных инструментов для сборки и управления зависимостями. Наиболее распространённым вариантом является использование npm или yarn в качестве менеджера пакетов.

  1. Создание проекта

    Для начала создаётся новый проект с помощью команды:

    npm init -y

    Затем добавляются необходимые зависимости:

    npm install marko express

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

    Пример стандартной структуры проекта:

    /src
  /components
    header.marko
    footer.marko
  /views
    index.marko
/public
/node_modules
/package.json

    В данном случае в каталоге components находятся компоненты Marko, а в views — страницы, которые будут рендериться сервером.

Конфигурация серверной части

Для серверной части чаще всего используется Node.js с Express, который хорошо интегрируется с Marko.

  1. Настройка Express и Marko

    Для рендеринга Marko-шаблонов на сервере, нужно указать соответствующий движок шаблонов для Express:

    const express = require('express');
const marko = require('marko');
const app = express();

app.set('view engine', 'marko');
app.set('views', __dirname + '/src/views');

app.get('/', (req, res) => {
    res.render('index');
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

    Этот код настраивает Express на рендеринг файлов с расширением .marko. Важно также указать каталог для представлений.

  2. Конфигурация рендеринга

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

    app.get('/', (req, res) => {
    const data = { title: 'Привет, Marko!' };
    res.render('index', data);
});

    Внутри шаблона index.marko можно использовать эти данные:

    <html>
  <head>
    <title>${input.title}</title>
  </head>
  <body>
    <h1>${input.title}</h1>
  </body>
</html>

Настройка клиентской части

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

  1. Интеграция с Webpack

    Для сборки клиентской части с использованием Marko нужно настроить Webpack. Необходимые зависимости:

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

    Затем в конфигурационном файле Webpack необходимо указать marko-loader:

    module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.marko$/,
        loader: 'marko-loader'
      }
    ]
  }
};

    Это обеспечит правильную обработку файлов Marko при сборке.

  2. Настройка рендеринга на клиенте

    Для рендеринга компонентов Marko на клиенте можно использовать метод marko.renderSync или асинхронный marko.render. Пример:

    <div id="app"></div>

<script src="/bundle.js"></script>
<script>
  const component = require('./src/components/app.marko');
  document.getElementById('app').appendChild(component.renderSync({ message: 'Hello from Marko!' }));
</script>

    Этот код позволяет рендерить компонент непосредственно в браузере, после загрузки JavaScript-файла.

Использование плагинов и расширений

Для расширения функциональности Marko можно использовать различные плагины и интеграции.

  1. Marko и Babel

    Для использования современных возможностей JavaScript, таких как синтаксис ES6 и JSX, можно настроить Babel. Установите необходимые зависимости:

    npm install @babel/core @babel/preset-env babel-loader --save-dev

    Затем добавьте настройки в Webpack:

    module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    },
    {
      test: /\.marko$/,
      loader: 'marko-loader'
    }
  ]
}

    Теперь можно использовать ES6 синтаксис в JavaScript-файлах и компонентах Marko.

  2. Серверная и клиентская интеграция с Webpack Dev Server

    Для удобной разработки и автоматической перезагрузки приложения на сервере и клиенте используется Webpack Dev Server. Установите необходимые зависимости:

    npm install webpack-dev-server --save-dev

    В файле webpack.config.js можно настроить Webpack Dev Server для автоматической перезагрузки:

    module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

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

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

При подготовке проекта к продакшн-развертыванию важно настроить соответствующие параметры сборки и рендеринга.

  1. Минификация и оптимизация

    Для минимизации размера итоговых файлов и улучшения производительности можно использовать плагин TerserWebpackPlugin:

    npm install terser-webpack-plugin --save-dev

    В файле конфигурации Webpack добавляется оптимизация:

    const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()]
  }
};

    Это обеспечит автоматическую минимизацию JavaScript-файлов при сборке.

  2. Сборка статических файлов

    В продакшн-окружении также важно настроить обработку статических файлов, таких как изображения, стили и шрифты. Для этого используются соответствующие загрузчики в Webpack:

    module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: ['file-loader']
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}

Заключение

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

Оглавление