Question

我有一个用旧的IIFE风格编写的外部库。我有一个Web组件，在其中使用此库。该Web组件是使用模具创建的。现在，如果我在某个项目中使用Web组件，则必须通过src文件将组件js文件和此外部库包含到index.html中。如何将此库包含在组件的已编译代码中？是否可以不将其重新写入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#copy

正确设置后，您的../assets/文件夹将被复制到构建文件夹中。

您需要将所有外部js文件复制到资产文件夹中。

在渲染方法中，您可以直接从/ assets /

引用js文件

Answer 2

经过研究，我发现最好的选择是使用stencil.config中的globalScript属性。

我将库添加到资产文件夹，然后将以下行添加到stencil.config.ts文件：

globalScript:'src/assets/myMathLib.js'

之后，我可以在组件代码中使用myMathLib.calculate（this.age）。

将es5 lib包含到模具Web组件中

2 个答案: