如何在Rails 6中使用Webpacker跨多个客户端JavaScript文件共享变量和函数？

Question

Webpacker将文件打包成这样

(function(module, exports) {

  function myFunction() {...}

这样做的后果是一个文件中的函数和变量无法从另一个文件或控制台中访问。

那么，“Rails方式”如何解决这个问题？

- Keith Carter

Answer 1

一旦你开始使用Webpacker，你就能够使用现代的ES6编写JavaScript。这种方式可以按照常规的ES6格式导入和导出模块。

例如:

// app/javascript/some_module.js

import moment from 'moment';

const SomeModule = {
  someMethod() {
    return someResult;
  }
};

export default SomeModule;

现在您可以将其导入到另一个模块中：

// app/javascript/another_module.js

import SomeModule from './some_module';

SomeModule.someMethod();

请注意文件中的文件夹结构注释。

- Adim

---

感觉这是正确的答案。谢谢。我应该在什么情况下将文件放置在 /app/javascript/packs/ 中，而不是 /app/javascript/？ - Keith Carter

app/javascript/packs 作为 webpack 启动编译过程的入口点。因此，建议仅保持 pack 文件干净，最小化导入模块和包的代码，并将实际应用程序相关代码放在 app/javascript/packs 之外。位于 pack 目录中的所有内容都会编译成单独的文件，并可以通过 javascript_pack_tag "pack_name" 访问。 - Adim

非常好，感谢您的帮助。 "import" 仍然将导入的任何内容包装在函数中，因此跨导入文件的函数和变量彼此不可用。 - Keith Carter

Answer 2

你可以使用Webpack插件通过`config/webpack/environment.js'`文件中的`environment.plugins.append`加载所需的变量/函数。

例如，如果您想从jQuery模块中公开`$`和`jQuery`函数，则该文件将如下所示：

#config/webpack/environment.js

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

const webpack = require('webpack');

environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

希望能对你有所帮助！

- Dijkie85