0

我决定将我的 react 爱好项目从 react 转移到 preact 并在文档中苦苦挣扎。我获得的大部分信息要么来自现有示例，要么来自 github 上的问题讨论。

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

有没有很好的解释默认有哪些变量以及如何管理它们？

4

1 回答 1

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。

但是，如果使用 a prerender-urls.{json,js}then 这将变得非常有用。

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对于每个预渲染的路由，该值将被替换为您在文件中指定的值。

于 2022-01-09T06:31:27.823 回答