Гэтсби удаляет проптипы по умолчанию?

Question

Я работаю над новым проектом с gatsby и читаю о том, как удалить proptypes в производстве. Я нашел это: https://github.com/gatsbyjs/gatsby/pull/14987 и мой вопрос, как это работает (если это работает с моим кодом, а не просто к ядру гэтсби), есть по умолчанию? или я должен что-то сделать, чтобы удалить все проптипы в моем коде?

После запуска gatsby build && gatsby serve проптипы все еще существуют, я также попытался добавить собственный .babelrc и работать напрямую с этим плагином без результаты https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types

Answer 1

Краткий ответ: да, PropTypes по умолчанию удалены.

TLTR

Приложения React / Gatsby отлично работают с PropTypes. Описанная проблема является открытой дискуссией о том, следует ли удалять эти PropTypes в производственных сборках, поскольку код должен быть согласованным, надежным и действительным в среде development перед его развертыванием или сборкой в ​​среде production.

Если вы предполагаете, что ваш код в development должен быть действительным и PropType -дружественным, вы можете сделать вывод, что вы можете опустить проверку PropType в среде production, чтобы уменьшить пропускную способность и улучшить сборку / время развертывания, так как проверка и проверка выполняются под development.

Таким образом, по умолчанию ваш PropTypes будет удален в production сборке.

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

{
  "plugins": ["@babel/plugin-proposal-optional-chaining",],
  "presets": [
    [
      "babel-preset-gatsby", //here your are adding the preset
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ]
}

И, как вы можете видеть в этом запросе на вытягивание GitHub и в babel-preset-gatsby зависимости, пакет добавлен в предустановку по умолчанию.

Изменения, добавленные в этот пакет, влияют только на ядро ​​вашего проекта, а не на зависимости в /node_modules.

Что такое ты видит DefaultProps, это значение по умолчанию по какой-то причине (например, проблемы с CMS), что реквизиты не принимаются компонентом React и позволяет избежать разрыва кода, предоставляя значение по умолчанию.

Подводя итог:

• По умолчанию ваш PropTypes будет удален в среде production, если вы используете интеграцию .babelrc по умолчанию.
• Ваши node_modules зависимости не будут Это добавление предустановки Gatsby Babel повлияет на это добавление.
• То, что вы видите, это DefaultProps, способ избежать взлома кода при использовании PropTypes или проблем с выборкой данных, особенно если они необходимы *. 1053 *

Answer 2

Я просто попытался воспроизвести вашу проблему, и у меня это работает. Я выполнил следующие шаги:

1. Создать новый сайт Gatsby: npx gatsby new gatsby-site
2. Создать сайт: npm run build
3. Запустить сайт: npm run serve

Например, в компоненте Header propTypes определены следующим образом:

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

При проверке готового сайта вы видите только defaultProps, а не propTypes, что правильно

var r = n("q1tI")
  , o = n.n(r)
  , i = n("Wbzz")
  , a = function(e) {
    var t = e.siteTitle;
    return o.a.createElement("header", {
        style: {
            background: "rebeccapurple",
            marginBottom: "1.45rem"
        }
    }, o.a.createElement("div", {
        style: {
            margin: "0 auto",
            maxWidth: 960,
            padding: "1.45rem 1.0875rem"
        }
    }, o.a.createElement("h1", {
        style: {
            margin: 0
        }
    }, o.a.createElement(i.Link, {
        to: "/",
        style: {
            color: "white",
            textDecoration: "none"
        }
    }, t))))
};
a.defaultProps = {
    siteTitle: ""
};
var c = a;

Вы также можете проверить, установив siteTitle на PropTypes.number

Header.propTypes = {
  siteTitle: PropTypes.number,
}

При запуске в разработке с использованием npm run develop вы увидите предупреждение в консоли

Failed prop type: Invalid prop `siteTitle` of type `string` supplied to `Header`, expected `number`.

Вы не увидите этого в рабочей среде при запуске npm run build && npm run serve

Примечание: propTypes и defaultProps - это нечто другое.

Проверяли ли вы также свою версию Gatsby ? Возможно, вы используете более старую версию

Я пробовал использовать эти версии (последние на момент публикации)

"dependencies": {
    "gatsby": "^2.24.26",
    "gatsby-image": "^2.4.14",
    "gatsby-plugin-manifest": "^2.4.21",
    "gatsby-plugin-offline": "^3.2.21",
    "gatsby-plugin-react-helmet": "^3.3.10",
    "gatsby-plugin-sharp": "^2.6.24",
    "gatsby-source-filesystem": "^2.3.23",
    "gatsby-transformer-sharp": "^2.5.12",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0"
  },