Skip to main content

向HTML注入内容

插件说明

本插件可以向构建生成的HTML中在指定位置注入标签。

使用

安装

npm i -D @reskript/plugin-inject-html

增加插件

// reskript.config.ts
import {configure} from '@reskript/settings';
import injectHtml from '@reskript/plugin-inject-html';

export default configure(
'webpack',
{
plugins: [
injectHtml({/* 配置 */}),
],
}
);

配置

export interface TagDescription {
tag: string;
attributes?: Record<string, string | true | undefined>;
void?: boolean;
children?: string;
}

export interface Options {
headStart?: TagDescription[];
headEnd?: TagDescription[];
bodyStart?: TagDescription[];
bodyEnd?: TagDescription[];
}

function injectHtml(options?: Options): SettingsPlugin;

配置可以在<head>标签和<body>标签的头部或尾部插入指定的标签,每一个标签通过TagDescription声明。

例如,想插入一个echarts的脚本,可以这样写:

// reskript.config.ts
import {configure} from '@reskript/settings';
import injectHtml from '@reskript/plugin-inject-html';

const injectOptions = {
headEnd: [
{
tag: 'script',
attributes: {
src: 'https://cdn.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js',
},
},
],
};

export default configure(
'webpack',
{
plugins: [
injectHtml(injectOptions),
],
}
);

在构建后,入口的HTML中会出现<script src="https://cdn.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js"></script>标签。