Comments / Profile of HabrUser13 / Habr

User

HabrUser13 Jul 30 2024 at 10:23

CSS в JS - это зло ;-)
Это как гранатой гвозди заколачивать.

На заре веб программирования всякой дичи хватало. Но со временем выработались "хорошие практики" и из мира хаоса многое стало упорядочиваться. Наконец-то стали отделять "мух от котлет". И вот спустя 25 лет "новое поколение" сново наступает на те же грабли. Всё развивается по спирали :-)))

Look

Настройка Webpack 5

HabrUser13 Nov 26 2022 at 17:03

Опечатка в предложении: "Вебпаку укажем, что используем плагин pug-plugin для файлов с расширением .pug"

Скорее всего, имелось в виду:

"Вебпаку укажем, что используем лоадер pug-loader для файлов с расширением .pug"

Pug plugin - это новый подход к обработке Pug файлов. Он намного облегчает использование Pug в проекте и имеет функциональность плагинов, таких как:

Используя Pug plugin, входной точкой является Pug файл. Все исходные файлы скриптов и стилей подключаются непосредственно в самом Pug файле с помощью require(). Это намного удобнее, чем импортировать стили в JavaScript файле. Pug plugin сам заменяет имена исходных файлов на их хешированные версии.

Взято из pug-plugin:

Webpack конфиг:

const path = require('path');
const PugPlugin = require('pug-plugin');

module.exports = {
  output: {
    path: path.join(__dirname, 'dist/'),
    // output filename of JS files
    filename: 'assets/js/[name].[contenthash:8].js'
  },

  entry: {
    // define Pug files in entry:
    index: './src/views/index.pug',      // => dist/index.html
    about: './src/views/about/index.pug' // => dist/about.html
    // ...
  },

  plugins: [
    // enable using Pug files as entry point
    new PugPlugin({
       extractCss: {
        // output filename of CSS files
        filename: 'assets/css/[name].[contenthash:8].css'
      },
    })
  ],

  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: PugPlugin.loader, // the Pug loader
      },
      {
        test: /\.(css|sass|scss)$/,
        use: ['css-loader', 'sass-loader']
      },
    ],
  },
};

Pug файл:

html
  head
    link(href=require('./styles.scss') rel='stylesheet')
  body
    h1 Hello Pug!
    script(src=require('./main.js'))

Сгенерированный HTML:

<html>
  <head>
    <link href="/assets/css/styles.f57966f4.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello Pug!</h1>
    <script src="/assets/js/main.b855d8f4.js"></script>
  </body>
</html>

Pug плагин также имеет Pug лоадер, который содержит встроенные фильтры для подсветки синтаксиса кода и markdown.

Для активации встроенного markdown фильтра с highlighting'ом кода в markdown, нужно добавить опции в Pug лоадер:

{
  test: /.pug$/,
  loader: '@webdiscus/pug-loader',
  options: {
    // enable embedded filters
    embedFilters: {
      // enable :markdown filter
      markdown: {
        // enable highlighting in markdown
        highlight: {
          verbose: true,
          use: 'prismjs',
        },
      },
    },
  },
},

В данный момент, для подсветки синтаксиса в markdown поддерживается PrismJS, который должен быть установлен дополнительно:

npm install -D prismjs

Теперь в Pug темплейте можно :markdown фильтр с блоками кода, например:

h1 Markdown with code blocks

:markdown
  _HTML_
  ```html
  <!-- Comment -->
  <div class="container">
    <p>Paragraph</p>
  </div>
  ```

  _JavaScript_
  ```js
  const arr = [1, 2, 'banana'];
  ```

Примеры использования pug-filters встроенных в pug-loader.

Look

Information

Specialization