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

Question

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

模板配置.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. 如果 src 中不存在，则创建一个 assets 目录。
2. 创建一个新文件并粘贴您的脚本内容，或者只复制并粘贴您的脚本文件。

3. 像这样在您的 tsx 文件中导入脚本:

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

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

附言- 您无需在 stencil.config.ts 的复制属性中提及 Assets 文件夹。默认情况下会复制它。