javascript - Rails 6 和 webpack : compile all coffeescript from one directory

Question

我正在将 Rails 5 应用程序迁移到 Rails 6 并将 coffeescript 切换为使用 webpack 加载。我创建了一个目录 app/javascripts/coffee 并放置了一个测试 greetings.coffee，其中仅包含

console.log('Hello World')

在 application.js 中，我尝试了几种要求目录内容的方法，但除了一种(显式要求)之外，所有方法都会产生运行时错误，提示找不到模块“咖啡”。

.*\.coffee$:12 Uncaught Error: Cannot find module './.coffee'

我可以编译并更新控制台的唯一方法是明确要求该文件。这意味着必须在 application.js 中列出所有现有的 coffeescript 文件，这似乎不对。

以下是我尝试过的各种 require 排列组合 (application.js)。

require.context('coffee', false, /\.coffee$/)
require('coffee/' + name + '.coffee')
require('coffee/greetings.coffee')

目录结构:

/app/javascript/packs/application.js
/app/javascript/coffee/greetings.coffee

我的理解是，我可以将所有 coffeescript 文件从 app/assets/javascripts 移动到 app/javascript/coffee，webpack 将编译这些文件。也许事实并非如此。

有人可以解释一下我做错了什么以及如何使用 webpack 将 Rails 5 应用程序中的遗留 coffeescript 引入 Rails 6 版本吗？

(我也安装了 coffee webpack 扩展，示例 hello_coffee.coffee pack 可以正常工作)。

我已经检查了 public/packs/js 下生成的文件，它们包含来自 greetings.coffee 源文件的代码，因此肯定会编译该文件。但是当网页加载时没有任何内容记录到控制台，因此它没有执行。为什么不呢？

更新:

我将其提炼为 3 种使用 require 的方式，以及 3 个结果:

require('coffee/greetings')

这有效并在 js 控制台中生成一条消息。

require.context('coffee', true, /\.coffee$/)

这可以编译，但是当网页加载时，控制台不会输出任何内容。

require('coffee/' + name + '.coffee')

这会编译但会在控制台中产生此错误

Uncaught Error: Cannot find module './.coffee'
    at webpackContextResolve (.*\.coffee$:12)
    at webpackContext (.*\.coffee$:7)
    at Object../app/javascript/packs/application.js (application.js:19)
    at __webpack_require__ (bootstrap:19)
    at Object.0 (log.js:56)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

结论是我必须手动将每个单独的 coffeescript 文件包含在 coffee 目录中，但这感觉不对。

谢谢

编辑。根据要求配置/webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .coffee
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

Answer 1

到目前为止，我认为对此有两个可能的答案:

1. 明确使用包含每个 coffee/*.coffee 文件

require('coffee/greetings.coffee')

1. 在 app/javascript/coffee 目录下创建一个 index.js 包含

function importAll (r) {
  r.keys().forEach(r);
}
importAll(require.context('coffee', true, /\.coffee$/));

在 application.js 中

require('coffee')

看起来 require.context 实际上并没有使文件可用，而是返回一个对象，该对象具有一个属性，该属性是所有可用文件的数组 - 然后必须单独要求(？)它们。

我确定这不是完全正确的答案，但它为我的问题提供了一个可行的解决方案 - 目前 - 我欢迎任何更正确的答案。

希望这会及时帮助其他人。

代码来自:https://www.npmjs.com/package/require-context