javascript - 获取库中的文件(汇总)

Question

我正在构建 javascript 库(更像是小部件)，其中将包含一些 UI。我正在通过 javascript 向 DOM 添加 HTML 元素。要添加此 HTML，我有以下代码:

async insertWidgetMarkup() {
    try {
        const response = await fetch('src/html/form.html')
        this.rootElement.innerHTML = await response.text()
    } catch (e) {
        console.error('Error gathering form HTML.', e)
    }
}

我用 rollup 构建了整个东西

// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';

export default {
    input: 'main.js',
    output: {
        dir: 'dist',
        format: 'cjs',
        name: 'search_widget.js'
    },
    plugins: [commonjs()]
};


// package.json
"scripts": {
  "build": "rollup --config --watch", 

我的问题是在捆绑文件中我有 await fetch('src/html/form.html');因此它在其他应用程序中不起作用。我可以以某种方式告诉汇总来解决这个问题，以便它在捆绑文件中包含 HTML 吗？或者如果没有 - 我还有什么其他选择，典型的方法是什么？

Answer 1

您可以 import 而不是获取文件直接用rollup-plugin-html .

设置 rollup配置使用这样的插件

import commonjs from '@rollup/plugin-commonjs';
import html from 'rollup-plugin-html';

export default {
    input: 'main.js',
    output: {
        format: 'umd',
        name: 'search_widget',
        file: 'dist/search_widget.js'
    },
    plugins: [
        commonjs(),
        html({
            include: '**/*.html'
        })
    ]
};

然后在你的源文件中，像这样使用 import

import html from 'src/html/form.html'

insertWidgetMarkup() {
    try {
        this.rootElement.innerHTML = html
    } catch (e) {
        console.error('Error gathering form HTML.', e)
    }
}

Rollup 现在将捆绑 html 文件。