Rails：如何从Webpacker托管文件中访问JS模块方法

我之前也碰到过一模一样的情况——Webpack默认会把每个模块封装在独立的作用域里，不像Sprockets那样直接把变量暴露到全局window对象上，所以原来视图里直接调用Test.log_to_console()就失效了。下面给你几个实用方案，既能让模块在视图、控制台正常访问，还能兼容旧的Sprockets编译代码：

方案1：手动挂载到window对象（最简单直接） #

这个方法不需要额外依赖，直接修改代码把需要全局访问的对象挂载到window上就行：

方式A：在模块内部挂载 #

修改javascript/src/javascript/test.js，在导出后添加全局挂载代码：

const Direction = {
  log_to_console: function(){
    console.log('test');
  }
};

export default Direction;
// 挂载到全局window，让视图和控制台能直接访问
window.Test = Direction;

方式B：在pack文件中挂载 #

如果你不想改动模块本身的代码，也可以在导入后再挂载：

// javascript/packs/application.js
import Test from '../src/javascript/test.js'
// 把模块挂载到全局，匹配旧代码的调用方式
window.Test = Test;

Test.log_to_console();

兼容旧代码小技巧：如果旧的Sprockets代码也定义了window.Test，可以加个判断避免覆盖旧逻辑：

if (!window.Test) {
  window.Test = Test;
}

方案2：用expose-loader自动暴露全局 #

如果有多个模块需要全局访问，手动挂载会比较繁琐，可以用expose-loader让Webpack自动帮你处理：

1. 先安装依赖：

yarn add expose-loader --dev

2. 两种配置方式可选：

方式A：导入时直接指定 #

修改application.js的导入语句，通过loader参数指定要暴露的全局变量名：

import Test from 'expose-loader?Test!../src/javascript/test.js'

方式B：全局配置规则 #

在config/webpack/environment.js中添加规则，让指定模块自动暴露：

const { environment } = require('@rails/webpacker')

environment.loaders.append('expose', {
  test: require.resolve('../app/javascript/src/javascript/test.js'),
  use: [{
    loader: 'expose-loader',
    options: 'Test'
  }]
})

module.exports = environment

这样每次导入该模块时，Webpack都会自动把它挂载到window.Test上。

为什么原来的方式会失效？ #

Sprockets编译的CoffeeScript代码@Test = { log_to_console }是直接在全局作用域（也就是window对象）上定义了Test变量；而Webpack默认会将每个模块包裹在独立的函数作用域中，模块内部的变量不会自动暴露到全局，所以视图和浏览器控制台自然就访问不到了。

以上方案都能让你继续沿用原来的Test.log_to_console()调用方式，同时完美兼容旧的Sprockets代码。

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