javascript - 如何使用 webpacker 使 Rails 6 项目中的页面可以访问 javascript 函数？

Question

在 Rails 项目中，我尝试从使用旧的 Sprockets Assets 管道切换到使用 webpacker。我已经设置了这些测试文件:

app/javascript/lib/foo.js

function foo() {
  console.log('foo')
}
console.log('bar')

app/javascript/packs/application.js

// some standard Rails JS requires
// ...
require('lib/foo')

app/views/test/index.html

<script>
  foo()
</script>

在我的layouts/application.html.erb中我有

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

当我在浏览器中转到该页面时，我看到“bar”记录到我的控制台，然后是

“ReferenceError:foo 未定义”

我尝试了几种不同的方法来设置我的文件，例如使用 import 而不是 require 或在我的 js 中设置 module.exports = foo 或 export default foo文件，但我没有成功解决上述错误消息。

简而言之，如何将 javascript 文件从 sprocket 移动到 webpacker？如果可能的话，如何在不更改现有 JavaScript 代码的情况下做到这一点？

Answer 1

您需要将函数和模块导出为 application.js 包中的命名导出，并扩展 Webpack 配置 output 以指定库名称和目标 var (或者 window 也可以)。

// config/webpack/environment.js

environment.config.merge({
  output: {
    library: ['Packs', '[name]'], // exports to "Packs.application" from application pack
    libraryTarget: 'var',
  }
})

// app/javascript/packs/application.js
import foo from '../lib/foo'

export {
  foo
}

<script>
 $(document).ready(function(){
   Packs.application.foo();
 });
</script>

库名称是任意的。使用 [name] 占位符是可选的，但如果您使用多个“包”，则允许您导出到单独的模块。