将自定义 Modernizr 构建集成到 Angular 项目中的最佳方法是什么？答案

【问题标题】：What is the best way to integrate custom Modernizr build into an Angular project?将自定义 Modernizr 构建集成到 Angular 项目中的最佳方法是什么？
【发布时间】：2023-03-07 05:31:01
【问题描述】：

我想将自定义 Modernizr 构建集成到我的 Angular 项目中以进行特征检测。我找到了这个Webpack Modernizr loader on GitHub，但我不知道如何将它集成到我的项目中。

我将以下代码放入项目根目录中的.modernizrrc 文件中，但我该如何调用它呢？

{
  "minify": true,
  "options": [
    "setClasses"
  ],
  "feature-detects": [
    "test/css/vwunit"
  ]
}

README文件中有这段代码，但是不知道放在哪里。

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.modernizrrc.js$/,
        use: [ 'modernizr-loader' ]
      },
      {
        test: /\.modernizrrc(\.json)?$/,
        use: [ 'modernizr-loader', 'json-loader' ]
      }
    ]
  },
  resolve: {
    alias: {
      modernizr$: path.resolve(__dirname, "path/to/.modernizrrc")
    }
  }
}

【问题讨论】：

标签： angular webpack modernizr

【解决方案1】：

我找到了解决这个问题的方法。您可以使用 ngx-build-plus 包含部分 webpack 配置。

const webpack = require('webpack');

module.exports = {
  module: {
    rules: [
      {
        test: /\.modernizrrc.js$/,
        use: [ 'modernizr-loader' ]
      },
      {
        test: /\.modernizrrc(\.json)?$/,
        use: [ 'modernizr-loader', 'json-loader' ]
      }
    ]
  },
  resolve: {
    alias: {
      modernizr$: path.resolve(__dirname, "path/to/.modernizrrc")
    }
  }
}

【讨论】：