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

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

为了在模板组件中使用自定义脚本，请按照下列步骤操作：

1. 在assets中创建一个src目录（如果该目录不存在）。
2. 创建一个新文件并粘贴脚本内容，或仅复制并粘贴脚本文件。

3. 将脚本导入tsx文件中，如下所示：

   从'./assets/my-script.js'导入*作为myScript

4. 构建您的组件并运行。

P.S。 -您无需在stencil.config.ts的copy属性中提及资产文件夹。默认情况下会复制它。