我在哪里可以找到关于 preact ejs 变量的合适文档？

Question

I decided to move my react hobby project from react to preact and struggling with the documentation.我决定将我的 react 爱好项目从 react 转移到 preact 并在文档中苦苦挣扎。 Most of the information I got was either from the existing examples or issue discussions on the github.我获得的大部分信息要么来自现有示例，要么来自 github 上的问题讨论。

But what still didn't find is the info on ejs variables used in the template html file.但是仍然没有找到模板 html 文件中使用的 ejs 变量的信息。

Is there a good explanation what variables there are by default and how to manage them?有没有很好的解释默认有哪些变量以及如何管理它们？

Answer 1

There's not much of use that's there by default, as this is instead a method of allowing you to inject your own values.默认情况下没有太多用处，因为这是一种允许您注入自己的值的方法。 If you want to see what's there by default, you can add the following to your template.html :如果您想查看默认情况下的内容，可以将以下内容添加到您的template.html中。html ：

<body>
    <% preact.bodyEnd %>
    <%= JSON.stringify(htmlWebpackPlugin.options) %>
</body>

This is what would get spit out:这是会吐出来的：

{
   "template":"!!/home/ryun/Projects/foobar/node_modules/ejs-loader/index.js?esModule=false!/tmp/preact-cli/template.tmp.ejs",
   "filename":"index.html",
   "hash":false,
   "inject":true,
   "compile":true,
   "favicon":"assets/favicon.ico",
   "minify":{
      "collapseWhitespace":true,
      "removeScriptTypeAttributes":true,
      "removeRedundantAttributes":true,
      "removeStyleLinkTypeAttributes":true,
      "removeComments":true
   },
   "cache":true,
   "showErrors":true,
   "chunks":"all",
   "excludeChunks":[
      
   ],
   "chunksSortMode":"auto",
   "meta":{
      
   },
   "title":"Home Page",
   "xhtml":false,
   "url":"/",
   "inlineCss":true,
   "preload":false,
   "manifest":{
      "name":"foobar",
      "short_name":"foobar",
      "start_url":"/",
      "display":"standalone",
      "orientation":"portrait",
      "background_color":"#fff",
      "theme_color":"#673ab8",
      "icons":[
         {
            "src":"/assets/icons/android-chrome-192x192.png",
            "type":"image/png",
            "sizes":"192x192"
         },
         {
            "src":"/assets/icons/android-chrome-512x512.png",
            "type":"image/png",
            "sizes":"512x512"
         }
      ]
   },
   "excludeAssets":[
      {
         
      }
   ],
   "config":{
      "_":[
         
      ],
      "src":"/home/ryun/Projects/foobar/src",
      "dest":"/home/ryun/Projects/foobar/build",
      "cwd":"/home/ryun/Projects/foobar",
      "esm":true,
      "sw":true,
      "babelConfig":".babelrc",
      "preload":false,
      "prerender":true,
      "prerenderUrls":"prerender-urls.json",
      "brotli":false,
      "inline-css":true,
      "config":"preact.config.js",
      "c":"preact.config.js",
      "production":true,
      "isProd":true,
      "isWatch":false,
      "manifest":{
         "name":"foobar",
         "short_name":"foobar",
         "start_url":"/",
         "display":"standalone",
         "orientation":"portrait",
         "background_color":"#fff",
         "theme_color":"#673ab8",
         "icons":[
            {
               "src":"/assets/icons/android-chrome-192x192.png",
               "type":"image/png",
               "sizes":"192x192"
            },
            {
               "src":"/assets/icons/android-chrome-512x512.png",
               "type":"image/png",
               "sizes":"512x512"
            }
         ]
      },
      "pkg":{
         "private":true,
         "name":"foobar",
         "version":"0.0.0",
         "license":"MIT",
         "scripts":{
            "build":"preact build",
            "serve":"sirv build --port 3001 --cors --single",
            "dev":"preact watch -p 3001",
            "lint":"eslint src",
            "test":"jest"
         },
         "eslintConfig":{
            "extends":"preact",
            "ignorePatterns":[
               "build/"
            ]
         },
         "devDependencies":{
            "enzyme":"^3.10.0",
            "enzyme-adapter-preact-pure":"^2.0.0",
            "eslint":"^6.0.1",
            "eslint-config-preact":"^1.1.0",
            "jest":"^24.9.0",
            "jest-preset-preact":"^1.0.0",
            "preact-cli":"^3.0.0",
            "sirv-cli":"1.0.3"
         },
         "dependencies":{
            "preact":"^10.3.2",
            "preact-render-to-string":"^5.1.4",
            "preact-router":"^3.2.1"
         },
         "jest":{
            "preset":"jest-preset-preact",
            "setupFiles":[
               "<rootdir>/tests/__mocks__/browserMocks.js",
               "<rootdir>/tests/__mocks__/setupTests.js"
            ]
         }
      }
   },
   "scriptLoading":"defer",
   "CLI_DATA":{
      "preRenderData":{
         "url":"/"
      }
   }
}

Not really useful, but it's not meant to be.不是真的有用，但它不是故意的。 These are just the options used to configure html-webpack-plugin .这些只是用于配置html-webpack-plugin的选项。

However, if using a prerender-urls.{json,js} then this becomes really useful.但是，如果使用prerender-urls.{json,js}那么这将变得非常有用。

prerender-urls.json

[
  {
    "url": "/",
    "title": "Home Page",
    "myVal": "foo"
  },
  {
    "url": "/profile",
    "title": "Profile Page",
    "myVal": "bar"
  }
]

Now in our template we can do the following:现在在我们的模板中，我们可以执行以下操作：

<meta name="some-meta-tag" content="<%= htmlWebpackPlugin.options.myVal %>">

That value would get swapped out for what you've specified in your prerender-urls.json file, for each route that gets prerendered.对于每个预渲染的路由，该值将被替换为您在prerender-urls.json文件中指定的值。

我在哪里可以找到关于 preact ejs 变量的合适文档？

问题描述

1 个解决方案

解决方案1
0 2022-01-09 06:31:27

我在哪里可以找到关于 preact ejs 变量的合适文档？

问题描述

1 个解决方案

解决方案1 0 2022-01-09 06:31:27

解决方案1
0 2022-01-09 06:31:27