Начало работы

Быстрый старт (CDN)

Чтобы попробовать Material Components для веба с минимальной настройкой, загрузите предкомпилированный CSS и JS пакеты из unpkg:

<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

Также рекомендуем использовать Material Icons из Google Fonts. (Некоторые из наших примеров неявно используют Material Icons.)

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

Затем включите MDC разметку...

<button class="mdc-button foo-button">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Кнопка</span>
</button>

...и инициализируйте JavaScript:

mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));

Локальная установка

Material Components для веба могут быть установлены локально с помощью npm. Он доступен как единственный пакет all-in-one:

npm i material-components-web

...или как отдельные компоненты:

npm i @material/button @material/ripple

Каждый пакет предоставляет предкомпилированный CSS и JS под своим каталогом dist. Предкомпилированный JS преобразован в формат UMD и может быть использован напрямую браузерами или внутри любого рабочего процесса, который ожидает потребление ES5. Ссылка на @material/foo в контексте Node.js автоматически ссылается на предкомпилированный JS под dist.Однако для наилучших результатов мы рекомендуем использовать модули ES2015 и Sass MDC Web напрямую. Это описано в шагах ниже.

Использование MDC Web с Sass и ES2015

Этот раздел описывает, как установить MDC Web Node модули, и скомпилировать Sass и JavaScript из этих Node модулей в вашей webpack конфигурации.

Вы также можете увидеть окончательный код и результат в Material Starter Kit.

Примечание: Этот гайд предполагает, что у вас установлены Node.js и npm локально.

Шаг 1: Webpack с Sass

Мы будем использовать webpack-dev-server, чтобы продемонстрировать, как webpack собирает наш Sass и JavaScript. Сначала запустите npm init, чтобы создать файл package.json. Когда процесс завершится, добавьте свойство start в раздел scripts.

{
  "scripts": {
    "start": "webpack serve"
  }
}

Вам потребуются все эти зависимости Node.js:

webpack: собирает Sass и JavaScript
webpack-dev-server: сервер разработки
sass-loader: загрузчик webpack для предварительной обработки файлов Sass
sass: компилятор Sass
css-loader: решает пути для CSS @import и url()
extract-loader: извлекает CSS в файл .css
file-loader: предоставляет .css файл как публичный URL

Вы можете установить все эти зависимости, запустив следующую команду:``` npm install --save-dev webpack webpack-cli webpack-dev-server css-loader sass-loader sass extract-loader file-loader


Чтобы продемонстрировать, как webpack собирает наш Sass, вам потребуется файл `index.html`. Этот HTML-файл должен включать CSS. CSS генерируется sass-loader, который компилирует файлы Sass в CSS. CSS извлекается в файл .css с помощью extract-loader. Создайте этот простой "hello world" `index.html`:

```html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="bundle.css">
  </head>
  <body>Привет, мир!</body>
</html>

И создайте простой файл Sass с именем app.scss:

body {
  color: blue;
}

Затем настройте webpack для преобразования app.scss в bundle.css. Для этого вам потребуется новый файл webpack.config.js:

module.exports = [{
  entry: './app.scss',
  output: {
    // Это необходимо для компиляции webpack
    // Но мы никогда не используем style-bundle.js
    filename: 'style-bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle.css',
            },
          },
          { loader: 'extract-loader' },
          { loader: 'css-loader' },
          {
            loader: 'sass-loader',
            options: {
              // Предпочтение Dart Sass
              implementation: require('sass'),
              // См. https://github.com/webpack-contrib/sass-loader/issues/804
              webpackImporter: false,
            },
          },
        ]
      }
    ]
  },
}];

Для тестирования вашей конфигурации webpack выполните:

npm start

И откроете http://localhost:8080 в браузере. Вы должны увидеть синий текст "Привет, мир".

Шаг 2: Включение CSS для компонентаТеперь, когда webpack настроен на компиляцию Sass в CSS, давайте включим Sass-файлы для кнопки Material Design. Сначала установите Node-зависимость:

npm install @material/button

Нам нужно сообщить app.scss, чтобы он импортировал Sass-файлы для @material/button. Мы также можем использовать Sass-миксины для кастомизации кнопки. Замените вашу версию "Hello World" в app.scss на этот код:

@use '@material/button/mdc-button';
@use '@material/button';

.foo-button {
  @include button.container-fill-color(darksalmon);
}

Также нам нужно настроить sass-loader для понимания импортов @material, используемых MDC Web. Обновите ваш webpack.config.js, изменив { loader: 'sass-loader' } на:

{
  loader: 'sass-loader',
  options: {
    // Предпочитаем Dart Sass
    implementation: require('sass'),

    // См. https://github.com/webpack-contrib/sass-loader/issues/804
    webpackImporter: false,
    sassOptions: {
      includePaths: ['./node_modules']
    },
  }
}

Примечание: Настройка includePaths должна быть достаточной для большинства случаев, когда все пакеты MDC Web обновлены вместе. Если вы сталкиваетесь с проблемами компиляции Sass из-за вложенных node_modules директорий, см. приложение ниже о том, как настроить кастомный импортер вместо этого.

Чтобы добавить стили для конкретных вендоров в Sass-файлы, нам нужно настроить autoprefixer через PostCSS.

Вам потребуются все эти Node-зависимости:

autoprefixer: Парсит CSS и добавляет префиксы для конкретных вендоров к CSS-правилам
postcss-loader: Загрузчик для Webpack, используемый в сочетании с autoprefixerВы можете установить все их, выполнив эту команду:

npm install --save-dev autoprefixer postcss-loader

Добавьте autoprefixer в начале вашего файла webpack.config.js:

const autoprefixer = require('autoprefixer');

Затем добавьте postcss-loader, используя autoprefixer как плагин:

{ loader: 'extract-loader' },
{ loader: 'css-loader' },
{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        autoprefixer()
      ]
    }
  }
},
{
  loader: 'sass-loader',
  options: {
    sassOptions: {
      includePaths: ['./node_modules']
    },
    // Предпочтение Dart Sass
    implementation: require('sass'),

    // См. https://github.com/webpack-contrib/sass-loader/issues/804
    webpackImporter: false,
  }
},

@material/button имеет документацию о необходимом HTML для кнопки. Обновите ваш файл index.html, чтобы включить разметку MDC Button и добавьте класс foo-button к элементу:

<body>
  <button class="foo-button mdc-button">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">Button</span>
  </button>
</body>

Теперь запустите npm start снова и откроите http://localhost:8080. Вы должны увидеть кнопку Material Design!

Шаг 3: Webpack с ES2015

Нам нужно настроить webpack для сборки JavaScript ES2015 в стандартный JavaScript с помощью Babel. Вам потребуются все следующие зависимости:

@babel/core
babel-loader: Компилирует файлы JavaScript с помощью Babel
@babel/preset-env: Предустановка для компиляции ES2015

Вы можете установить все эти зависимости, выполнив следующую команду:``` npm install --save-dev @babel/core babel-loader @babel/preset-env


Чтобы продемонстрировать, как webpack собирает наш JavaScript, вам потребуется обновить файл `index.html`, чтобы включить JavaScript. Файл JavaScript сгенерирован babel-loader, который компилирует файлы ES2015 в JavaScript. Добавьте этот тег `<script>` в файл `index.html` перед закрывающим тегом `</body>`:

```html
<script src="bundle.js" async></script>

И создайте простой файл ES2015 с именем app.js:

console.log('hello world');

Затем настройте webpack для преобразования app.js в bundle.js, модифицируя следующие свойства в файле webpack.config.js:

Измените entry на массив, содержащий как app.scss, так и app.js:
```
entry: ['./app.scss', './app.js']
```
Измените output.filename на bundle.js:
```
output: {
  filename: 'bundle.js',
}
```

Добавьте объект babel-loader в массив правил после объекта sass-loader:

{
  test: /\.js$/,
  loader: 'babel-loader',
  options: {
    presets: ['@babel/preset-env'],
  },
}

Финальный файл webpack.config.js должен выглядеть следующим образом:

const autoprefixer = require('autoprefixer');

module.exports = {
  entry: ['./app.scss', './app.js'],
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle.css',
            },
          },
          {loader: 'extract-loader'},
          {loader: 'css-loader'},
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  autoprefixer()
                ]
              }
            } 
          },
          {
            loader: 'sass-loader',
            options: {
              // Предпочитаем Dart Sass
              implementation: require('sass'),
```              // См. https://github.com/webpack-contrib/sass-loader/issues/804
              webpackImporter: false,
              sassOptions: {
                includePaths: ['./node_modules'],
              },
            },
          }
        ],
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
        },
      }
    ],
  },
};

Теперь запустите npm start снова и открыть http://localhost:8080. Вы должны увидеть "hello world" в консоли.

Шаг 4: Включение JavaScript для компонента

Теперь, когда webpack настроен для компиляции ES2015 в JavaScript, давайте включим ES2015 файлы из Material Design ripple. Сначала установите Node зависимость:

npm install @material/ripple

Нам нужно сообщить нашему app.js о том, чтобы импортировать ES2015 файл для @material/ripple. Также нам нужно инициализировать MDCRipple с элементом DOM. Замените вашу "hello world" версию app.js на этот код:

import {MDCRipple} from '@material/ripple/index';
const ripple = new MDCRipple(document.querySelector('.foo-кнопка'));

Примечание: Мы явно ссылаемся на index в каждом пакете MDC Web для импорта исходного кода ES2015 напрямую. Это позволяет использовать tree-shaking и избегать дублирования кода для общих зависимостей (например, Ripple). Однако это требует транспиляции модулей MDC Web с помощью инструментов, установленных в шаге 3.

Теперь снова запустите npm start и откроите http://localhost:8080. Вы должны увидеть Material Design ripple на кнопке!

Шаг 5: Создание производственных активов

Для создания производственных активов нам нужно настроить webpack для минификации и оптимизации наших файлов. Добавьте следующие настройки в ваш webpack.config.js:

module.exports = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
          },
        },
      }),
    ],
  },
};

Теперь, когда вы запустите npm run build, webpack создаст минифицированные и оптимизированные версии ваших файлов, которые можно использовать в продакшне.До этого момента мы использовали webpack-dev-server для предварительного просмотра нашей работы с живыми обновлениями. Однако webpack-dev-server не предназначен для использования в продакшне. Вместо этого мы должны создать производственные активы.

Добавьте еще один скрипт в package.json:

  "scripts": {
    "build": "webpack",
    "start": "webpack serve"
  }

Теперь запустите следующую команду:

npm run build

Это создаст bundle.js и bundle.css в директории проекта. Эти файлы содержат скомпилированный CSS и транспилированный JS, которые можно скопировать в директорию, обслуживаемую любым веб-сервером.

Приложение: Настройка Sass Importer для вложенных node_modules

Возможно, вы окажетесь в ситуации с вложенными директориями node_modules, если у вас есть зависимости на конфликтующих версиях отдельных пакетов MDC Web. Это может привести к ошибкам при попытке компиляции Sass с использованием конфигурации includePaths, так как Sass сканирует только пакеты @material под верхним уровнем node_modules.

В качестве альтернативы вы можете реализовать импортер следующим образом, который использует алгоритм разрешения модулей node для поиска ближайшей зависимости к файлу, который ее импортировал. Добавьте следующий код в начало вашего webpack.config.js (до exports):

const path = require('path');
``````javascript
function tryResolve_(url, sourceFilename) {
  // Поместите require.resolve в try/catch, чтобы избежать ошибок libsass при использовании node-sass
  // когда импортер выбрасывает исключение
  try {
    return require.resolve(url, {paths: [path.dirname(sourceFilename)]});
  } catch (e) {
    return '';
  }
}
``````markdown
Функция tryResolveScss(url, sourceFilename) {
  // Поддержка опущения расширения .scss и ведущего _
  const normalizedUrl = url.endsWith('.scss') ? url : `${url}.scss`;
  return tryResolve_(normalizedUrl, sourceFilename) ||
    tryResolve_(path.join(path.dirname(normalizedUrl), `_${path.basename(normalizedUrl)}`),
      sourceFilename);
}функция materialImporter(url, prev) {
  если (url.startsWith('@material')) {
    const resolved = tryResolveScss(url, prev);
    return {file: resolved || url};
  }
  return {file: url};
}

Затем обновите вашу конфигурацию sass-loader следующим образом:

 {
   loader: 'sass-loader',
   options: {   
     // Предпочитаем Dart Sass
     implementation: require('sass'),

     // См. https://github.com/webpack-contrib/sass-loader/issues/804
     webpackImporter: false,
     sassOptions: {
       importer: materialImporter,
       includePaths: ['./node_modules'],
     },
   },
 }

OSCHINA-MIRROR/mirrors-material-components-web

Начало работы

Быстрый старт (CDN)

Локальная установка

Использование MDC Web с Sass и ES2015

Шаг 1: Webpack с Sass

Шаг 2: Включение CSS для компонентаТеперь, когда webpack настроен на компиляцию Sass в CSS, давайте включим Sass-файлы для кнопки Material Design. Сначала установите Node-зависимость:

Шаг 3: Webpack с ES2015

Шаг 4: Включение JavaScript для компонента

Шаг 5: Создание производственных активов

Приложение: Настройка Sass Importer для вложенных node_modules

Опубликовать ( 0 )

Введение

Обновления

Участники

Язык

Недавние действия

OSCHINA-MIRROR/mirrors-material-components-web .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Начало работы

Быстрый старт (CDN)

Локальная установка

Использование MDC Web с Sass и ES2015

Шаг 1: Webpack с Sass

Шаг 2: Включение CSS для компонентаТеперь, когда webpack настроен на компиляцию Sass в CSS, давайте включим Sass-файлы для кнопки Material Design. Сначала установите Node-зависимость:

Шаг 3: Webpack с ES2015

Шаг 4: Включение JavaScript для компонента

Шаг 5: Создание производственных активов

Приложение: Настройка Sass Importer для вложенных node_modules

Опубликовать ( 0 )

Введение

Обновления

Участники

Язык

Недавние действия

OSCHINA-MIRROR/mirrors-material-components-web