如何将包含JS与CSS的本地库整体加载到HTML页面？

方案1：将CSS内嵌到JS文件中 #

既然你的JS类本来就负责把CSS加载到目标DOM元素，完全可以把CSS代码直接内嵌到JS里，不用单独维护CSS文件。开发者只需要引入这一个JS文件即可。

示例实现：

class MyLibrary {
  constructor(targetId) {
    this.targetElement = document.getElementById(targetId);
    if (!this.targetElement) return;

    // 把你的CSS写成模板字符串
    const css = `
      .your-class {
        color: #333;
        padding: 10px;
        border: 1px solid #ccc;
      }
      /* 其他样式 */
    `;

    // 动态创建style标签并插入到页面
    const style = document.createElement('style');
    style.textContent = css;
    document.head.appendChild(style);

    // 或者直接给目标元素添加内联样式（如果样式只作用于该元素）
    // this.targetElement.style.cssText = 'color: #333; padding: 10px;';
  }

  // 你的其他类方法
}

开发者只需一行代码引入：

<script src="/lib/main.js"></script>

之后就能直接实例化你的类使用。

方案2：用打包工具合并成单文件 #

如果不想把CSS写进JS，用打包工具（比如Rollup、Parcel、Webpack）把JS和CSS打包成一个独立的JS文件，工具会自动处理CSS的注入逻辑，开发者只需引入这个打包后的文件。

以Parcel为例，步骤很简单：

1. 在main.js顶部导入CSS：

import './style.css';

class MyLibrary {
  // 你的类逻辑
}

// 暴露类到全局，方便开发者使用
window.MyLibrary = MyLibrary;

2. 安装Parcel：

npm install -g parcel-bundler

3. 执行打包命令：

parcel main.js

4. Parcel会在dist目录生成打包好的JS文件，开发者只需引入：

<script src="/lib/dist/main.js"></script>

打包后的JS会自动在页面加载时注入CSS样式。

方案3：写一个入口加载脚本 #

如果不想修改现有文件或使用打包工具，可以写一个loader.js，让它负责动态加载你的JS和CSS文件，开发者只需要引入这个loader即可。

示例loader.js代码：

// 加载CSS
const cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href = '/lib/style.css';
document.head.appendChild(cssLink);

// 加载JS
const script = document.createElement('script');
script.src = '/lib/main.js';
script.onload = () => {
  // JS加载完成后可做初始化操作（可选）
};
document.body.appendChild(script);

开发者只需引入这一行：

<script src="/lib/loader.js"></script>

这样会自动加载你的库所需的所有文件。

内容的提问来源于stack exchange，提问作者gotiredofcoding