Установка Modernizr с Yarn on Rails

Я пытаюсь установить Modernizr с Yarn в Rails. Я делаю 'yarn add Modernizr', и он добавляется в каталог .node-modules. Однако я не могу понять, как правильно ссылаться на него из Rails.

Я добавил //= require modernizr/src/Modernizr в application.js. Но я не уверен, что это правильная ссылка, потому что я получаю следующую ошибку:

Uncaught ReferenceError: define is not defined

Нужно ли как-то собирать библиотеку Modernizr. А пряжа этого не делает? Я несколько новичок в этом и изо всех сил пытаюсь понять взаимосвязь между веб-упаковщиком, пряжей и рельсами и как правильно создавать и добавлять библиотеки в рельсы с помощью пряжи. Во всех учебниках кажется, что это так же просто, как 'yarn add xxx', но я, кажется, что-то упускаю. Спасибо.


ruby-on-rails yarnpkg javascript
person Lorenz    schedule 31.05.2017    source источник
comment
Я совершенно уверен, что вы не можете ссылаться на пакеты webpacker в Sprockets (например, application.js). Можно и наоборот, но не так, как вы описываете. Попробуйте настроить «пакет», импортировать Modernizer в пакет, а затем сослаться на него с помощью javascript_pack_tag.   -  person chrismanderson    schedule 01.06.2017

Ответы (1)


arrow_upward
5
arrow_downward

Вам нужен гем webpacker, который по умолчанию поставляется с Rails 5.1+, но его можно использовать. с рельсами 4.2+. Получите эту настройку, затем выполните следующие шаги, чтобы запустить пользовательскую сборку Modernizr в вашем приложении Rails:

Загрузчик

Устанавливаем загрузчик для modernizr:

$ yarn install webpack-modernizr-loader

Конфигурация Modernizr

Загрузите желаемую конфигурацию Modernizr с сайта Modernizr. Перейдите по такой ссылке:

https://modernizr.com/download?-appearance-backgroundblendmode-backgroundcliptext-backgroundsize-bgpositionxy-borderradius-boxshadow-boxsizing-canvas-canvastext-cssgradients-csspointerevents-fontface-generatedcontent-inputtypes-lastchild-mediaqueries-multibgs-opacity-svg-touchevents-setclasses-dontmin-cssclassprefix:mod_

Затем настройте свою сборку, нажмите «Сборка» в правом верхнем углу и загрузите «Command Line Config».

Затем преобразуйте его из JSON в модуль и сохраните как config/webpack/.modernizrrc.js (обратите внимание на начальную точку в имени файла), например:

"use strict";

module.exports = {
  minify: false,
  options: [
    "setClasses"
  ],
  "feature-detects": [
    "test/canvas",
    "test/canvastext",
    "test/inputtypes",
    "test/svg",
    "test/touchevents",
    "test/css/appearance",
    "test/css/backgroundblendmode",
    "test/css/backgroundcliptext",
    "test/css/backgroundposition-xy",
    "test/css/backgroundsize",
    "test/css/borderradius",
    "test/css/boxshadow",
    "test/css/boxsizing",
    "test/css/fontface",
    "test/css/generatedcontent",
    "test/css/gradients",
    "test/css/lastchild",
    "test/css/mediaqueries",
    "test/css/multiplebgs",
    "test/css/opacity",
    "test/css/pointerevents"
  ]
};

Пользовательская конфигурация

Затем создайте собственный файл конфигурации веб-пакета как config/webpack/custom.js:

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        loader: "webpack-modernizr-loader",
        test: /\.modernizrrc\.js$/
      }
    ]
  },
  resolve: {
    alias: {
      modernizr$: path.resolve(__dirname, "./.modernizrrc.js")
    }
  }
};

Открыть конфигурацию

Сделайте так, чтобы ваш config/webpack/environment.js выглядел так:

const { environment } = require("@rails/webpacker");
const customConfig    = require('./custom');

environment.config.merge(customConfig);

module.exports = environment;

Импорт модернизации

Добавьте следующую строку в app/javascript/packs/application.js:

import modernizr from 'modernizr';

Загрузить пакет

Добавьте это в свой макет:

<%= javascript_pack_tag "application", defer: true %>

Вуаля

Загрузите свой сайт в браузере, проверьте и убедитесь, что (а) классы CSS modernizr были добавлены в DOM и (б) вы не видите никаких ошибок компиляции веб-пакета в консоли.

Дополнительная литература

Я столкнулся с этим вопросом, когда пытался настроить modernizr с помощью webpacker в приложении Rails 5, увидел, что вопрос остался без ответа, и сам разобрался. Если вы хотите узнать, как все это работает, я предлагаю прочитать документацию для webpacker и webpack-modernizr-loader.

person armchairdj    schedule 24.04.2018
comment
Включает ли это также шаг добавления пользовательского js-файла modernizr из желаемой пользовательской сборки в каталог webpack/src? @armchairdj - person Coding active; 14.10.2019
comment
Команда для установки загрузчика должна быть yarn add webpack-modernizr-loader - person Mauro Nidola; 14.11.2019