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

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

1 голос
/ 07 марта 2019

У меня есть внешняя библиотека, написанная в старом стиле 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
    }
  ]
};

Ответы [ 2 ]

1 голос
/ 07 марта 2019

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

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

Вам необходимо скопировать все внешние файлы js в папку assets.

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

0 голосов
/ 12 апреля 2019

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

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

globalScript:'src/assets/myMathLib.js'

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

...