1

我有一个以旧 IIFE 风格编写的外部库。我有一个在内部使用这个库的 Web 组件。此 Web 组件是使用 stencil 创建的。现在，如果我在某个项目中使用我的 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
    }
  ]
};
4

2 回答 2

1

在项目的根目录中的某处，应该有一个 stencil.config.ts 文件。在那里您可以指定复制任务。您可以在此处阅读如何执行此操作：https ://stenciljs.com/docs/config#copy

在您正确设置并且您的 ../assets/ 文件夹被复制到您的构建文件夹之后。

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

在您的渲染方法中，您可以直接从 /assets/ 引用 js 文件

于 2019-03-07T09:39:08.617 回答
0

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

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

globalScript:'src/assets/myMathLib.js'

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

于 2019-04-12T09:47:14.533 回答