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>标签。