如何在Stencil组件中导入JavaScript文件？寻找styleUrl的JS等价方案

Stencil本身没有类似styleUrl的配置项用来导入JavaScript文件，而是直接使用ES模块的import语法在组件的TypeScript文件中导入，具体做法如下：

1. 导入模块化JS代码 #

如果你的JS代码是模块化的（导出了函数、变量等），直接在组件的index.ts顶部导入，然后在组件生命周期钩子中调用：

// 从目标JS文件导入需要的函数/变量
import { myJsFunction } from '../../index.js';

@Component({
  tag: 'my-random-component',
  styleUrl: '../../index.scss',
  shadow: true
})
export class MyRandomComponent {
  // 在组件加载前的生命周期钩子中执行导入的函数
  componentWillLoad() {
    myJsFunction();
  }
}

2. 导入全局非模块化JS脚本 #

如果你的JS代码是全局脚本（没有导出语句，直接挂载全局变量/函数），可以用以下两种方式处理：

• 全局引入法：在项目根目录的index.html中用<script>标签引入，所有组件都能访问全局内容：

  <script src="../../index.js"></script>
  

• 动态导入法：在组件生命周期中动态加载脚本，确保脚本加载完成后再执行逻辑：

  @Component({
    tag: 'my-random-component',
    styleUrl: '../../index.scss',
    shadow: true
  })
  export class MyRandomComponent {
    async componentWillLoad() {
      // 动态加载脚本
      await import('../../index.js');
      // 调用全局函数
      window.myGlobalFunction();
    }
  }
  

关于你遇到的问题 #

你之前把JS代码写在index.ts但函数未被调用，核心原因是Stencil不会自动执行导入的函数，需要你手动在组件的生命周期钩子（比如componentWillLoad、componentDidLoad）中触发函数执行。

内容的提问来源于stack exchange，提问作者happy_story