使用 Yarn on Rails 安装 Modernizr

Question

我正在尝试在 Rails 中使用 Yarn 安装 Modernizr。我愿意'yarn add Modernizr'，它被添加到 .node-modules 目录中。但是，我不知道如何从 Rails 正确引用它。

我已经添加//= require modernizr/src/Modernizr到 application.js。但我不确定这是正确的参考，因为我收到以下错误：

Uncaught ReferenceError: define is not defined

我是否需要以某种方式构建 Modernizr 库。纱线不这样做吗？我对此有点陌生，正在努力理解 webpacker、yarn 和 rails 之间的关系，以及如何使用yarn正确构建和添加库到 rails。这些教程都让它看起来好像很简单，'yarn add xxx'但我似乎遗漏了一些东西。谢谢你。

Answer 1

您正在寻找的是webpacker gem，它默认随 Rails 5.1+ 一起提供，但可以与 Rails 4.2+ 一起使用。进行设置，然后按照以下步骤在您的 Rails 应用程序中运行自定义 Modernizr 构建：

装载机

为 Modernizr 安装加载器：

$ yarn install webpack-modernizr-loader

现代化配置

从 Modernizr 站点下载所需的 Modernizr 配置。访问这样的链接：

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

然后配置您的构建，单击右上角的“构建”，然后下载“命令行配置”。

然后将其从 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"
  ]
};

自定义配置

接下来，创建一个自定义的 webpack 配置文件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 %>

瞧

在浏览器中加载您的站点，检查并确认 (a) Modernizr CSS 类已添加到 DOM，并且 (b) 您在控制台中没有看到任何 webpack 编译错误。

进一步阅读

当我想在 Rails 5 应用程序中使用 webpacker 设置 Modernizr 时，我遇到了这个问题，看到这个问题没有答案，我自己想通了。如果你想知道所有这些是如何工作的，我建议阅读webpacker和webpack-modernizr-loader的文档。