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

Question

我决定将我的 React 爱好项目从 React 转移到 Preact 并努力处理文档。我得到的大部分信息要么来自现有示例，要么来自 github.

上的问题讨论

但是还是没有找到模板html文件中使用的ejs变量的信息。

是否有很好的解释默认情况下有哪些变量以及如何管理它们？

Answer 1

默认情况下没有太多用处，因为这是一种允许您注入自己的值的方法。如果您想查看默认情况下的内容，可以将以下内容添加到 template.html:

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

这就是吐出来的内容：

{
   "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":"/"
      }
   }
}

不是很有用，但不是故意的。这些只是用于配置 html-webpack-plugin.

的选项

但是，如果使用 prerender-urls.{json,js} 那么这将非常有用。

prerender-urls.json

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

现在在我们的模板中，我们可以执行以下操作：

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

对于每条预渲染的路由，该值将换成您在 prerender-urls.json 文件中指定的值。

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

Where do I find a proper doc on preact ejs variables?

javascript

ejs

preact

preact-cli