2

我有一个 Stencil 组件，作为其业务逻辑的一部分，我需要使用外部 Javascript 文件mylib.js。Javascript 文件包含 Stencil 组件应该使用的一些业务逻辑。

这是我的组件：

import { Component, Element, Prop, h, Host } from '@stencil/core';
import moment from 'moment';
import mylib from 'src/js/mylib.js';

@Component({
  tag: 'dashboard-widget',
  styleUrl: 'dashboard-widget.css',
  shadow: false
})
export class DashboardWidget {

  @Element() el: HTMLElement;

  @Prop() canvas: HTMLElement;
  @Prop() channelName: string = "";
  @Prop() channelValue: string = "";
  @Prop() isBlinking: boolean = true;

  componentDidLoad() {
      console.log(mylib.test());
  }

  render() {
    return (
      <Host>
      <div class="card-content card-content-padding">
          <b>{this.channelName}</b>
          <h1 class="dashboard-card-value">{this.channelValue}</h1>
          <canvas class="dashboard-card-canvas"></canvas>
      </div>
      </Host>
    );
  }
}

我不断收到错误

TypeScript 找不到模块“src/js/mylib.js”。

我试过了：

import mylib from 'src/js/mylib.js';

import 'src/js/mylib.js';

import 'mylib' from 'src/js/mylib.js';

无济于事。

该mylib.js文件位于js文件夹内。在线文档根本没有提到如何导入外部库。我已经成功导入了 moment.js，但这只是因为我首先通过以下方式安装了它：

npm install moment

然后通过执行以下操作将其导入组件中：

import moment from 'moment';

我还尝试通过在 index.html 中引用外部 JS 库来“导入”它

<script src="assets/js/mylib.js"></script>

该库在组件外部可用，但在组件内部不可用

4

2 回答 2

10

既然您提到了 Moment.js，我将首先解释如何加载它。可以通过在组件的模块中导入它来按照您的方式进行操作，但是这将导致包大小很大，因为 moment 的 npm 包不是针对浏览器的，而是用于包大小不的 Node.js 项目'没关系。Moment.js 在包内分发浏览器包。所以你可以做的是向你的 Stencil 输出目标添加一个复制任务，以复制node_modules/moment/min/moment.min.js到你的构建目录中：

// stencil.config.ts

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

export const config: Config = {
  namespace: 'my-app',
  outputTargets: [
    {
      type: 'www',
      copy: [
        {
          src: '../node_modules/moment/min/moment.min.js',
          dest: 'lib/moment.min.js'
        }
      ]
    }
  ]
};

然后，正如您已经尝试使用您的库一样，您可以将该脚本加载到src/index.html：

<script src="/lib/moment.min.js"></script>

但是，您的 Typescript 项目尚不知道moment在全局范围内可用。不过这很容易解决，您可以在项目的某处添加声明文件，例如src/global.d.ts内容

import _moment from 'moment';

declare global {
    const moment: typeof _moment;
}

对于在 Node.js 上下文而不是浏览器上下文中运行的测试文件，您可以通过创建包含内容的文件（例如）来导入 moment 或添加moment到全局范围jest-setup-file.js

global.moment = require('moment');

然后在stencil.config.ts您只需将setupFilesAfterEnv字段添加到testing：

{
  testing: {
    setupFilesAfterEnv: ['<rootDir>/jest-setup-file.js']
  }
}

如果您在整个应用程序中不需要脚本，但仅在加载特定组件时才需要，则仅从该组件中加载脚本更有意义。最简单的方法是创建一个script元素并将其添加到 DOM：

declare const MyLib: any; // assuming that `mylib.js` adds `MyLib` to the global scope

export class MyComp {
  componentWillLoad() {
    const src = "assets/js/mylib.js";

    if (document.querySelector(`script[src="${src}"]`)) {
      return; // already exists
    }

    const script = document.createElement('script');
    script.src = src;

    document.head.appendChild(script);
  }
}

您的脚本/库很可能还会为全局范围贡献一个变量，因此您必须再次让 Typescript 知道，您可以使用declare关键字声明全局上下文中存在变量（请参阅https:// www.typescriptlang.org/docs/handbook/declaration-files/by-example.html#global-variables）。

作为另一个例子，这是我为加载谷歌地图 api 而写的一个助手：

export const importMapsApi = async () =>
  new Promise<typeof google.maps>((resolve, reject) => {
    if ('google' in window) {
      return resolve(google.maps);
    }

    const script = document.createElement('script');

    script.onload = () => resolve(google.maps);
    script.onerror = reject;
    script.src = `https://maps.googleapis.com/maps/api/js?key=${googleApiKey}&libraries=places`;

    document.body.appendChild(script);
  });

（google类型来自@types/googlemaps封装）

然后我可以像这样使用它

const maps = await importMapsApi();
const service = new maps.DistanceMatrixService();
于 2020-03-11T16:59:08.633 回答
1

要导入 NPM 未安装的文件，您可以使用以./或为前缀的相对路径../：

import mylib from '../../js/mylib.js';

您可以导入从该 JS 文件导出的所有内容，甚至可以使用命名导入：

mylib.js

export function someFunction() {
  // some logic
}

仪表板小部件.tsx

import { someFunction } from '../../js/mylib.js`;

const result = someFunction();
于 2020-03-12T15:25:44.893 回答