Включите es5 lib в веб-компонент трафарета

Question

У меня есть внешняя библиотека, написанная в старом стиле IIFE. У меня есть веб-компонент, который использует эту библиотеку внутри. Этот веб-компонент был создан с помощью трафарета. Теперь, если я использую свой веб-компонент в каком-либо проекте, я должен включить файл js компонента и эту внешнюю библиотеку в файл index.html через файл src. Как я могу включить эту библиотеку в скомпилированный код компонента? Возможно ли это без перезаписи на модуль es6?

Вот так выглядит мой код (в index.html):

<script src="./myMathLib.js"></script>
<script src="./myWebComponent.js"></script>

Я хочу, чтобы это было так:

<script src="./myWebComponent.js"></script>

Это код моего компонента:

import {Component, Prop} from '@stencil/core';

declare var myMathLib: any;

@Component({
    tag: 'my-component',
    shadow: true
})
export class MyComponent {

    @Prop() name: string;
    @Prop() age: number;

    render() {
        return <div>
            The age of {this.name} is: {myMathLib.calculate(this.age)}
        </div>;
    }
}

Это мой tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "declaration": false,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2017"
    ],
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2017",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "jsx": "react",
    "jsxFactory": "h"
  },
  "include": [
    "src",
    "types/jsx.d.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Это мой stencil.config.ts:

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'mycomponent',
  outputTargets:[
    { type: 'dist' },
    { type: 'docs' },
    {
      type: 'www',
      serviceWorker: null // disable service workers
    }
  ]
};

Answer 1

Где-то в корне вашего проекта должен быть файл stencil.config.ts. Там вы можете указать задачи копирования. Вы можете прочитать здесь, как это сделать: https://stenciljs.com/docs/config

После того, как вы настроите это правильно и ваша папка../assets/ будет скопирована в вашу папку сборки.

Вам нужно скопировать все внешние JS-файлы в папку активов.

В вашем методе рендеринга вы можете напрямую ссылаться на файл js из / assets /

Answer 2

После некоторых исследований я выяснил, что лучшим вариантом является использование globalScript свойство от stencil.config.

Я добавил свою библиотеку в папку активов, а затем добавил следующую строку в мой файл stencil.config.ts:

globalScript:'src/assets/myMathLib.js'

После этого я смог использовать myMathLib.calculate(this.age) в коде компонента.