模具 |在组件中导入第三方脚本

Question

我正在尝试在复制到构建目录的 Stencil 组件中使用第三方脚本。我打算在各种网站上使用独立组件。我不是在构建 Stencil 应用程序。

stencil.config.ts

export const config: Config = {
  namespace: 'community-component',
  outputTargets: [
    { type: 'dist' },
    { type: 'docs' },
    {
      type: 'www',
      serviceWorker: null // disable service workers
    }
  ],
  copy: [
    { src: 'www/assets/myscript.js', dest: 'assets/js/myscript.js' }
  ]
};

然后我就这样导入了，不对。 myscript.js 还加载 jQuery.

import * as MyScript from '../../../src/www/assets/myscript.js';
declare const jQuery: any;

现在我得到 Uncaught ReferenceError: jQuery is not defined。

Answer 1

要在模板组件中使用自定义脚本，请执行以下步骤：

在 src 中创建一个 assets 目录（如果不存在）。
创建一个新文件并粘贴脚本的内容，或者只复制并粘贴脚本文件。
像这样在 tsx 文件中导入脚本：

从 './assets/my-script.js' 导入 * 作为 myScript
构建您的组件并运行.

P.S。 - 您无需在 stencil.config.ts 的副本属性中提及资产文件夹。它被默认复制。

模具 |在组件中导入第三方脚本

StencilJS | Importing a third party script in a component

javascript

stenciljs