时间戳

首页 > 解决方案 > 将 jQuery 和 bootstrap JS 与 stenciljs 组件一起使用

web-component - 将 jQuery 和 bootstrap JS 与 stenciljs 组件一起使用

问题描述

我们有使用 Angular 构建的应用程序，现在针对所有客户特定的要求，我们希望使用模板 js 构建 Web 组件。

想法是保持核心应用程序的清洁，而不是为特定的客户需求混合代码。

所以我们提出了 Web 组件，并坚持使用 Stencil JS。

我们面临的第一个问题是我们的 Web 组件还需要使用 jquery、bootstrap js 和一些第三方 js。

我们希望构建我们的组件以从外部封装，这意味着它们将处于 shadow dom 中。

现在我有两个问题

1) 每个组件都包含 jQuery、bootstrap js 等 JS 库是否是一种好习惯，因为在我看来这不是一个好主意 2) 我们如何将 jQuery 例如包含到 Web 组件中。

我尝试了很多方法，最后一种是在模板 Web 组件的构造函数中包含标记，但它不起作用。

export class TestComponent {

  @Prop() token: string;

  @State() test: string;
  @Element() private element: HTMLElement;

  constructor() {

    this.element.innerHTML = `
    <script src="../../assets/js/jquery.min.js"></script>

`;

所以问题是如何在shadow dom中内置的模板中使用JS第三方库（shadow选项设置为true）

欢迎对此提出任何意见，我们将不胜感激:)

标签： web-componentstenciljsstencil-component

解决方案

对于大多数 Web 组件，我不会使用 jQuery，因为不需要任何现代框架 dom 操作，大多数情况下您只关注渲染功能。

我做了一个测试，在使用 npm i jquery 添加 jquery 依赖项后，这似乎工作正常：

import { Component, h } from '@stencil/core';
import $ from "jquery";

@Component({
    tag: 'app-test'
})
export class AppTest {  
    render() {
        const version = $().jquery;
        return [
            <div>
                jQuery Version: {version}
            </div>
        ];
    }
}

推荐阅读