GatsbyJS: экранировать сгенерированный HTML для тела JSON - PullRequest
Новая
       10

GatsbyJS: экранировать сгенерированный HTML для тела JSON

0 голосов
/ 21 марта 2019

Мне нужно загрузить сгенерированный HTML-код GatsbyJS в API-интерфейс, который принимает исходный код в теле сообщения JSON (https://developers.hubspot.com/docs/methods/templates/post_templates), Я бы хотел экранировать символы «в статическом HTML-коде, сгенерированном Gatsby (и другие вещи»).упоминается в https://www.thorntech.com/2012/07/4-things-you-must-do-when-putting-html-in-json/ позже). Я попытался расширить веб-пакет gatsby следующим образом в gatsby-node.js

exports.onCreateWebpackConfig = ({
  stage,
  // rules,
  // loaders,
  plugins,
  actions,
}) => {
  actions.setWebpackConfig({
    module: {
      rules:
        stage === 'build' || stage === 'build-html'
          ? [
              {
                test: /\.html$/,
                loader: 'string-replace-loader',
                options: {
                  search: '"',
                  replace: '\"',
                  flags: 'g',
                },
              },
            ]
          : [],
    },
  });
};

, который использует этот загрузчик веб-пакетов https://www.npmjs.com/package/string-replace-loader. Это не работаетОднако, если я изменю тест на /\.js$/, я смогу получить 'string-replace-loader' для замены текста внутри js-файлов. Мой test: /\.html$/, возможно, ищет html-файлы, прежде чем они будут сгенерированы?

1 Ответ

1 голос
/ 22 марта 2019

Похоже, что Гэтсби не рендерит html напрямую с веб-пакетом , поэтому используемый вами загрузчик веб-пакетов не будет работать.

Вместо этого вы можете подключиться к хуку onPostBuild вgatsby-node.js, это будет работать при генерации htmls.Затем вы можете использовать что-то вроде glob (зависимость webpack), чтобы найти все html и экранировать их.

Вот краткий пример с помощью fs-extra (зависимость gatsby): 

const fs = require('fs-extra')
const glob = require('glob')

exports.onPostBuild = async () => {
  const htmls = glob.sync('./public/**/*.html') // array of paths to any htmls in public

  const escapeHtmls = htmls.map(async htmlPath => {
    const content = await fs.readFile(htmlPath, 'utf-8')

    const escaped = JSON.stringify(content)

    // upload the escaped strings to your api,
    // or write it to a local file with write file i.e `fs.writeFile(htmlPath, escaped)`

    console.log(`${htmlPath} has been escaped.`)
  })

  return Promise.all(escapeHtmls).catch(e => console.log(e))
}
...