Web组件自定义元素-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_56590688/article/details/136563439

本文介绍了如何创建一个名为WeatherCard.js的JavaScript组件，使用Webpack进行模块化打包，并在HTML中引入和使用。步骤包括设置Webpack配置，安装必要的loader，以及在HTML中动态创建和渲染组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建一个文件WeatherCard.js

// WeatherCard.js

export default class WeatherCard {
  constructor(day, temperature) {
    this.day = day;
    this.temperature = temperature;
    this.element = document.createElement('div');
    this.element.className = 'weather-card';
    this.render();
  }

  render() {
    this.element.innerHTML = `
      <h2>${this.day}</h2>
      <p>Temperature: ${this.temperature}°C</p>
    `;
  }

  mount(parent) {
    parent.appendChild(this.element);
  }

 change({ day, temperature }) {
    // 检查参数是否存在，如果存在则更新对应属性
    if (day) {
      this.day = day;
    }
    if (temperature) {
      this.temperature = temperature;
    }
    // 调用 render 方法重新渲染卡片
    this.render();
  }
}

2.安装 webpack 和必要的 loader：

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev

3.创建 webpack 配置文件

在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下配置：

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./WeatherCard.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "weather-card.js",
    library: "WeatherCard",
    libraryTarget: "umd",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

4.运行 webpack 打包：

npx webpack --config webpack.config.js

5.在 HTML 文件中使用组件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather Card Component</title>
    <script src="dist/weather-card.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      // 页面加载完毕后执行
      window.onload = function () {
        // 创建 WeatherCard 实例
        const WeatherCardMap = WeatherCard.default;
        const obj = new WeatherCardMap("Monday", 25);
        // 将 WeatherCard 添加到页面中的某个元素中
        obj.mount(document.getElementById("app"));
      };
    </script>
  </body>
</html>