如何在Gatsby站点中添加自定义Modernizr构建？求最佳方案

Got it, sticking modernizr.js in your static/ folder and adding a script tag to your layout works, but it’s not the most aligned with Gatsby’s ecosystem. Here are a few better, more Gatsby-friendly approaches you can try:

• Use Gatsby's SSR API for Script Injection
  Gatsby’s Server-Side Rendering (SSR) APIs let you inject assets directly into your site’s HTML during the build/render process, which is way more integrated than manually adding script tags. Here’s how to do it with Modernizr:

  Create or update gatsby-ssr.js in your project root:

  exports.onRenderBody = ({ setHeadComponents }) => {
    setHeadComponents([
      <script
        key="modernizr"
        src="/modernizr.js"
        defer // Adjust to async if you need different loading behavior
      />,
    ]);
  };
  

  Keep your modernizr.js in the static/ folder (Gatsby automatically copies this to your build output). This ensures the script loads consistently across every page without repeating code in your layouts.

• Import a Custom Modernizr Build as a Module
  Instead of using a bloated pre-built Modernizr file, create a custom build that only includes the feature checks you actually need. This reduces file size and fits neatly into Gatsby’s webpack-based workflow:

  1. First, install Modernizr as a dev dependency:

     npm install modernizr --save-dev
     

  2. Create a .modernizrrc config file in your root to define your desired features:

     {
       "minify": true,
       "options": ["setClasses"],
       "feature-detects": [
         "test/css/flexbox",
         "test/es6/promises"
         // Add only the checks your project needs
       ]
     }
     

  3. Add a build script to your package.json to generate the custom file:

     {
       "scripts": {
         "build-modernizr": "modernizr -c .modernizrrc -d src/utils/modernizr.js"
       }
     }
     

  4. Run the script to generate your tailored Modernizr file:

     npm run build-modernizr
     

  5. Now import it directly into your main layout component:

     // src/components/layout.js
     import '../utils/modernizr';
     
     const Layout = ({ children }) => {
       // Your layout code here
       return <main>{children}</main>;
     };
     
     export default Layout;
     

  This way, Modernizr is bundled with your other code, and you avoid loading unnecessary feature checks.

• Leverage the gatsby-plugin-modernizr Plugin
  For the most hands-off, Gatsby-native solution, use the official community plugin that handles all the heavy lifting for you:

  1. Install the plugin and Modernizr:

     npm install gatsby-plugin-modernizr modernizr --save-dev
     

  2. Use the same .modernizrrc config file from the custom build example above to specify your features.
  3. Add the plugin to your gatsby-config.js:

     module.exports = {
       plugins: [
         'gatsby-plugin-modernizr'
       ]
     };
     

  The plugin will automatically generate your custom Modernizr build during Gatsby’s build process and inject it into your site. No manual script tags or file management required—this is the most seamless approach for most projects.

Pick the method that fits your needs: the plugin is great for simplicity, the custom module import gives you full control over bundle size, and the SSR injection works well if you need to use a pre-built Modernizr file.

内容的提问来源于stack exchange，提问作者bravokiloecho