从Webpacker迁移至Vite后，视图调用JS方法提示未定义

问题核心是ES模块有独立作用域，入口文件里导入的testMethod不会自动暴露到全局，所以视图脚本直接调用会提示未定义。以下是几种可行的解决方式：

方式一：将方法挂载到全局对象 #

修改你的入口文件，把需要在视图中调用的方法挂载到window对象：

import { testMethod } from '~/src/js/testfunctions.js'
import '~/src/css/test.scss'

// 挂载到全局
window.testMethod = testMethod;

之后视图里的脚本就能直接调用testMethod()了。这种方式简单直接，但要注意全局变量污染的问题，适合小项目或特定场景。

方式二：在视图脚本中直接导入方法 #

调整视图里的script标签，在模块脚本内直接导入目标方法：

%script{type: 'module'}
  :plain
    // 路径需符合Vite的解析规则，可根据你的别名配置调整
    import { testMethod } from '~/src/js/testfunctions.js';
    testMethod();

如果你的Vite配置里没有设置~/别名，可能需要改用相对路径（比如../src/js/testfunctions.js，具体根据HTML文件位置调整）。这种方式更符合ES模块的规范，避免全局污染，是推荐的做法。

额外注意 #

Vite和Webpacker的模块处理逻辑不同：Webpacker可能默认将入口文件的变量挂载到全局，而Vite严格遵循ES模块标准，所有模块变量默认仅在模块内部可见。迁移时需要适应这种差异，优先使用模块化的导入方式。

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