@ commercialtools-frontend/mc-html- template
此软件包包含 utils 和脚本 index.html 为商贸中心的定制.
安装
$ npm install --save @commercetools-frontend/mc-html-template
API 密码
generateTemplate
这种方法将返回模板 HTML 文档,同时提供注入的 CSS/JS 脚本.
注意到 HTML 文档仍将有 占位符 (见
replaceHtmlPlaceholders(中文(简体) )
type TGenerateTemplateOptions = {
cssImports?: string[];
scriptImports?: string[];
};
function generateTemplate({
cssImports = [],
scriptImports = [],
}: TGenerateTemplateOptions);
replaceHtmlPlaceholders
这种方法将取代 占位符 在 HTML 文档中根据应用程序配置定义.
这种方法应作为最后步骤,以便充分汇编 index.html。 。 。 .
目前,我们界定了以下占位符:
__CDN_URL__页:1cdnUrl应用程序配置中定义的值__MC_API_URL__页:1mcApiUrl应用程序配置中定义的值__LOADING_SCREEN_CSS__: (中文(简体) )内部定义用于加载动画的CSS,以防页面加载需要更长的时间__LOADING_SCREEN_JS__: (中文(简体) )内部定义(JS为加载动画,以防页面需要更长时间加载)__APP_ENVIRONMENT__: 在全球变量中提供的已消毒的应用程序配置环境window.app__CSP__: 生成Content-Security-Policy指令,定义为 HTML 元标记
type TReplaceHtmlPlaceholdersOptions = {
env: ApplicationRuntimeConfig['env'];
headers: Record<string, string | undefined>;
};
function replaceHtmlPlaceholders(
indexHtmlContent: string,
options: TReplaceHtmlPlaceholdersOptions
): string;
compileHtml
这种方法将汇编模板HTML文档.
type TCompileHtmlResult = {
env: ApplicationRuntimeConfig['env'];
headers: Record<string, string | undefined>;
indexHtmlContent: string;
};
async function compileHtml(
indexHtmlTemplatePath: string
): Promise<TCompileHtmlResult>;
processHeaders
这种方法将返回用于服务器响应的安全信头,服务于 index.html。 。 。 .
这个 applicationConfig.env 将被注入到 window.app。 。 。 .
这个 applicationConfig.headers 是用户提供的已处理的应用程序头.
返回值 processHeaders 函数包含以下可随时使用的 HTTP 头:
{
"Strict-Transport-Security": "max-age=31536000",
"X-XSS-Protection": "1; mode=block",
"X-Content-Type-Options": "nosniff",
"X-Frame-Options": "SAMEORIGIN",
"Content-Security-Policy": "...",
"Feature-Policies": "..."
}
function processHeaders(
applicationConfig: ApplicationRuntimeConfig
): Record<string, string | undefined>;
邦德勒入境点
包会暴露出特定捆绑者用来使用HTML模板的一些特殊切入点.
网络软件包
如果你使用Webpack 和 HtmlWebpackPlugin你可以通过 webpack 将 Webpack 模板参数映射到我们通用的 generateTemplate 方法.
new HtmlWebpackPlugin({
template: require.resolve(
'@commercetools-frontend/mc-html-template/webpack'
),
// ...
}),