Различать среды Гэтсби как профессионал

Вы пытались выяснить, почему изменение в вашем коде не отображается, у вас открыты тысячи вкладок, а затем вас внезапно поражает… вместо этого у вас открыт рабочий URL.

Я был там, невероятно легко потратить огромные периоды времени и продуктивности, пытаясь решить это, только чтобы понять, что вы даже не смотрели на местную среду разработки. Итак, у меня есть отличный совет, который поможет убедиться, что этого больше никогда не повторится.

Gatsby позволяет указать путь к изображению для значка, а также цвет фона и цвет темы для манифеста сайта. Он доступен через плагин gatsby-plugin-manifest.

Вы можете добавить его в свой gatsby-config обычным способом, и он может выглядеть примерно так:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: `standalone`,
        icon: `src/images/icon.png`, // This path is relative to the root of the site.
      },
    },
  ],
}

Это шаблон, который будет использоваться по умолчанию, если вы воспользуетесь стартовой программой или учебником на www.gatsbyjs.org - не очень полезно для решения этих надоедливых проблем с дифференциацией.

Мы собираемся написать две небольшие функции, которые будут принимать аргумент для NODE_ENV и определять, какой цвет и изображение следует использовать. Затем мы будем использовать их вместо шестнадцатеричного значения цвета и пути изображения, указанного выше.

const faviconSelector = (env) => {
    return env === 'production' 
      ? 'src/images/icon.png' 
      : env === 'staging' 
        ? 'src/images/icon-staging.png' 
        : 'src/images/icon-development.png'
}
const envColourSelector = (env) => {
    return env === 'production' 
      ? '#7b41c1' // Purple
      : env === 'staging' 
        ? '#405ac1' // Blue
        : '#c13f5e' // Red
}

Я стараюсь, чтобы мои цвета выделялись и не были слишком похожи, также стоит сделать вашу локальную среду разработки более радикальной (инвертированной) или сделать оттенок красного, чтобы действительно предупредить вас о том, что вы работаете над состоянием разработки вашего приложение / сайт.

Теперь мы помещаем эти функции в нашу конфигурацию:

const { NODE_ENV } = process.env
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: envColourSelector(NODE_ENV),
        theme_color: envColourSelector(NODE_ENV),
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: `standalone`,
        icon: faviconSelector(NODE_ENV), // This path is relative to the root of the site.
      },
    },
  ],
}

Вы можете протестировать новую конфигурацию, изменив значение NODE_ENV и обновив вкладку браузера.

NODE_ENV=staging gatsby develop or NODE_ENV=production gatsby build && gatsby serve or gatsby develop

Есть ли у вас какие-нибудь советы по развитию? Оставляйте их в комментариях, я всегда в поисках новых способов повышения своей продуктивности.

Различать среды Гэтсби как профессионал

Похожие вопросы