Git Product home page Git Product logo

gatsby-plugin-no-javascript's Introduction

Commitizen friendly codecov

gatsby-plugin-no-javascript

Removes all javascript files created by Gatsby from the static HTML files. This plugin does NOT remove all javascript, but only the javascript that Gatsby is adding to the page.

⚠️ The Gatsby javascript is only removed from the production build gatsby build and not during the dev build gatsby develop. If you do not write any state logic or event handlers then this should not effect you. This feature may be something this plugin wants to tackle in the future.

How to install

npm install gatsby-plugin-no-javascript or yarn add gatsby-plugin-no-javascript

⚠️ This plugin should be included last in your gatsby-config.js as it relies on onPreRenderHTML replaceHeadComponents and replacePostBodyComponents.

Available options

  • excludeFiles: string (optional)

    • Will be used as a regular expression to test whether or not a Gatsby javascript file should be excluded by this plugin. The default behavior is that all Gatsby javascript files are removed by this plugin, so this option gives you a chance to "exclude them from being excluded 😅".
    • A use case for this option is to not remove the webpack-runtime.js file that Gatsby ships by default in case you have other javascript that relies on that runtime.
    • ⚠️ Make sure you enter a string 'a-string' instead of JS regexp like /a-string/, Gatsby has trouble handing off regular expressions to plugins. The string you pass in will be handled as a regular expression for you.
  • excludePaths: string (optional)

    • An array of paths that are to be excluded from removing all the JS. The code runs a "contains" so this can be used to block a directory and all subdirectories, or to get as specific as you want.

When do I use this plugin?

Use this plugin if you want to remove the javascript that comes out of the box with Gatsby. This is useful if your site is truly a static site with no interactivity or maybe the interactivity is handled by different javascript than your React components.

Examples of usage

module.exports = {
  siteMetadata: {
    title: 'Budget Dumpster',
    description: 'Budget Dumpster specializes in local dumpster rentals for homeowners and contractors alike. Call us to rent a dumpster in your area.'
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-remove-trailing-slashes',
    'gatsby-plugin-postcss',
    'gatsby-plugin-react-svg', 
    {
      resolve: `gatsby-plugin-google-tagmanager`,
      options: {
        id: process.env.GATSBY_GTM_ID,
        includeInDevelopment: true
      }
    },
    'gatsby-plugin-no-javascript' // <-- Here is the plugin, make sure it is included last in the plugins array.
  ]
}

Upgrade Guide v1 -> v2

  • Update the exclude pluginOption to excludeFiles in your gatsby-config file. The value passed in is exactly the same as it was before.

How to run tests

npm run test

Node versions

We also test against the minimum supported Node version of Gatsby up to the latest version during each pull request to make sure the code will work for all supported NodeJS versions. You can find this configuration in the Cloud Build config file.

How to develop locally

This project relies on Typescript for all the type safety goodness which can be found in the src directory. The compiled output goes directly into the root of the project because Gatsby expects certain files to be in the root.

Dev workflow

  1. Get the latest updates npm install.
  2. Run npm run watch to tell Typescript to listen to changes in the src directory and recompile on the fly.
  3. Link this package to an actual gatsby project to test the plugin working, there is a good article for this here.

How to contribute

See the contributing docs

Code of conduct

See the code of conduct

gatsby-plugin-no-javascript's People

Contributors

dependabot[bot] avatar itmayziii avatar wmontgomery avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.