How to use the @vuepress/shared-utils.fs.readFile function in @vuepress/shared-utils

// TODO remove when it's fixed
  if (!clientConfig.devtool && (!clientConfig.plugins ||           
    !clientConfig.plugins.some(p =>
      p instanceof webpack.SourceMapDevToolPlugin ||
      p instanceof webpack.EvalSourceMapDevToolPlugin
    ))) {
    await workaroundEmptyStyleChunk()
  }

  // create server renderer using built manifests
  const renderer = createBundleRenderer(serverBundle, {
    clientManifest,
    runInNewContext: false,
    inject: false,
    shouldPrefetch: ctx.siteConfig.shouldPrefetch || (() => true),
    template: await fs.readFile(ctx.ssrTemplate, 'utf-8')
  })

  // pre-render head tags from user config
  const userHeadTags = (ctx.siteConfig.head || [])
    .map(renderHeadTag)
    .join('\n  ')

  // if the user does not have a custom 404.md, generate the theme's default
  if (!ctx.pages.some(p => p.path === '/404.html')) {
    ctx.addPage({ path: '/404.html' })
  }

  // render pages
  logger.wait('Rendering static HTML...')

  const pagePaths = []

// remove manifests after loading them.
  await fs.remove(path.resolve(outDir, 'manifest'))

  // find and remove empty style chunk caused by
  // https://github.com/webpack-contrib/mini-css-extract-plugin/issues/85
  // TODO remove when it's fixed
  await workaroundEmptyStyleChunk()

  // create server renderer using built manifests
  const renderer = createBundleRenderer(serverBundle, {
    clientManifest,
    runInNewContext: false,
    inject: false,
    shouldPrefetch: options.siteConfig.shouldPrefetch || (() => true),
    template: await fs.readFile(options.ssrTemplate, 'utf-8')
  })

  // pre-render head tags from user config
  const userHeadTags = (options.siteConfig.head || [])
    .map(renderHeadTag)
    .join('\n  ')

  // render pages
  logger.wait('Rendering static HTML...')
  for (const page of options.pages) {
    await renderPage(page)
  }

  // if the user does not have a custom 404.md, generate the theme's default
  if (!options.pages.some(p => p.path === '/404.html')) {
    await renderPage({ path: '/404.html' })

async function workaroundEmptyStyleChunk (stats, outDir) {
  const styleChunk = stats.children[0].assets.find(a => {
    return /styles\.\w{8}\.js$/.test(a.name)
  })
  if (!styleChunk) return
  const styleChunkPath = path.resolve(outDir, styleChunk.name)
  const styleChunkContent = await fs.readFile(styleChunkPath, 'utf-8')
  await fs.remove(styleChunkPath)
  // prepend it to app.js.
  // this is necessary for the webpack runtime to work properly.
  const appChunk = stats.children[0].assets.find(a => {
    return /app\.\w{8}\.js$/.test(a.name)
  })
  const appChunkPath = path.resolve(outDir, appChunk.name)
  const appChunkContent = await fs.readFile(appChunkPath, 'utf-8')
  await fs.writeFile(appChunkPath, styleChunkContent + appChunkContent)
}

async function workaroundEmptyStyleChunk () {
    const styleChunk = stats.children[0].assets.find(a => {
      return /styles\.\w{8}\.js$/.test(a.name)
    })
    if (!styleChunk) return
    const styleChunkPath = path.resolve(outDir, styleChunk.name)
    const styleChunkContent = await fs.readFile(styleChunkPath, 'utf-8')
    await fs.remove(styleChunkPath)
    // prepend it to app.js.
    // this is necessary for the webpack runtime to work properly.
    const appChunk = stats.children[0].assets.find(a => {
      return /app\.\w{8}\.js$/.test(a.name)
    })
    const appChunkPath = path.resolve(outDir, appChunk.name)
    const appChunkContent = await fs.readFile(appChunkPath, 'utf-8')
    await fs.writeFile(appChunkPath, styleChunkContent + appChunkContent)
  }
}

async function workaroundEmptyStyleChunk (stats, outDir) {
  const styleChunk = stats.children[0].assets.find(a => {
    return /styles\.\w{8}\.js$/.test(a.name)
  })
  if (!styleChunk) return
  const styleChunkPath = path.resolve(outDir, styleChunk.name)
  const styleChunkContent = await fs.readFile(styleChunkPath, 'utf-8')
  await fs.remove(styleChunkPath)
  // prepend it to app.js.
  // this is necessary for the webpack runtime to work properly.
  const appChunk = stats.children[0].assets.find(a => {
    return /app\.\w{8}\.js$/.test(a.name)
  })
  const appChunkPath = path.resolve(outDir, appChunk.name)
  const appChunkContent = await fs.readFile(appChunkPath, 'utf-8')
  await fs.writeFile(appChunkPath, styleChunkContent + appChunkContent)
}

async function getPageData ({ filePath, routePath, base }) {
    const key = 'v-' + Math.random().toString(16).slice(2)
    const data = { key, path: routePath, filePath }

    const content = await fs.readFile(filePath, 'utf-8')

    // extract yaml frontmatter
    const frontmatter = parseFrontmatter(content)
    // infer title
    const title = inferTitle(frontmatter)
    if (title) {
      data.title = title
    }
    const headers = extractHeaders(
      frontmatter.content,
      ['h2', 'h3'],
      markdown
    )
    if (headers.length) {
      data.headers = headers
    }

async process ({
    computed,
    markdown,
    enhancers = [],
    preRender = {}
  }) {
    if (this._filePath) {
      logger.developer(`static_route`, chalk.cyan(this.path))
      this._content = await fs.readFile(this._filePath, 'utf-8')
    } else if (this._content) {
      logger.developer(`static_route`, chalk.cyan(this.path))
      this._filePath = await this._context.writeTemp(`temp-pages/${this.key}.md`, this._content)
    } else {
      logger.developer(`dynamic_route`, chalk.cyan(this.path))
    }

    if (this._content) {
      if (this._filePath.endsWith('.md')) {
        const { excerpt, data, content } = parseFrontmatter(this._content)
        this._strippedContent = content
        Object.assign(this.frontmatter, data)

        // infer title
        const title = inferTitle(this.frontmatter, this._strippedContent)
        if (title) {

async generated () {
    const { serviceWorker } = options
    const { outDir } = context
    const swFilePath = path.resolve(outDir, 'service-worker.js')
    if (serviceWorker) {
      logger.wait('Generating service worker...')
      const wbb = require('workbox-build')
      await wbb.generateSW({
        swDest: swFilePath,
        globDirectory: outDir,
        globPatterns: ['**\/*.{js,css,html,png,jpg,jpeg,gif,svg,woff,woff2,eot,ttf,otf}'],
        ...(options.generateSWConfig || {})
      })
      await fs.writeFile(
        swFilePath,
        await fs.readFile(path.resolve(__dirname, 'lib/skip-waiting.js'), 'utf8'),
        { flag: 'a' }
      )
    }
  }
})

const modules = await Promise.all(files.map(async file => {
      const { base } = path.parse(file)
      let content = await fs.readFile(file, 'utf-8')
      content = content.replace('module.exports =', 'export default')
      return { name: base, content, dirname: DIR }
    }))