在Rails上使用Yarn安装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 add xxx'一样简单，但我似乎错过了一些东西。 谢谢。

Answer 1

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

装载机

为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-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;

导入Modernizr

将以下行添加到app/javascript/packs/application.js ：

import modernizr from 'modernizr';

加载你的包

将其添加到您的布局：

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

瞧

在浏览器中加载您的站点，检查并确认（a）将现代化的CSS类添加到DOM中，以及（b）您没有在控制台中看到任何webpack编译错误。

进一步阅读

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