如何在多个文件中访问已实例化的npm包lax.js对象？

方法1：将lax挂载到全局window对象 #

在全局JS文件里初始化lax后，把它挂载到window对象上，让其他组件能全局访问：

import lax from './lax.js';
import './component';

window.onload = function () {
  lax.init()
  lax.addDriver('scrollY', function () {
    return window.scrollY;
  });
  // 挂载到全局作用域
  window.lax = lax;
}

之后在component.js里直接通过window.lax调用：

// component.js示例代码
function handleScroll() {
  window.lax.update()
}
window.addEventListener('scroll', handleScroll)

方法2：通过ES模块导出导入共享 #

修改全局JS文件，导出初始化后的lax实例，组件文件通过导入使用：

// 全局JS文件
import lax from './lax.js';

window.onload = function () {
  lax.init()
  lax.addDriver('scrollY', function () {
    return window.scrollY;
  });
}

// 导出lax实例
export default lax;

在component.js中导入使用：

// component.js
import lax from './全局JS文件名.js';

// 直接调用lax方法
lax.addElements('.parallax-item', {
  scrollY: {
    translateY: [["elInY", "elOutY"], [0, 200]]
  }
})

注意：组件内的操作建议放在window.onload或DOMContentLoaded回调中，确保lax已完成初始化。

方法3：创建独立的lax实例模块 #

新建一个lax-instance.js专门处理初始化并导出实例，所有需要用lax的文件都从这里导入：

// lax-instance.js
import lax from './lax.js';

// 初始化lax
lax.init()
lax.addDriver('scrollY', function () {
  return window.scrollY;
});

export default lax;

全局JS和组件文件统一导入该模块：

// 全局JS文件
import './lax-instance.js';
import './component.js';

// component.js
import lax from './lax-instance.js';

// 正常使用lax API

这种方式符合ES模块规范，避免全局污染，同时保证所有组件共用同一个lax实例。

核心注意点：必须保证lax的初始化代码（lax.init()和驱动添加）在组件调用lax之前执行，window.onload能确保这一点，因为它会等待页面所有资源加载完成后才触发。

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