我使用Importmap for Rails 7实现了JavaScript模块模式,但在生产环境中加载定制helpers JS文件时出现错误.

我的应用程序/Java脚本的文件系统 struct 如下:

> javascript
  > controllers
    > application.js
    > index.js
    > first_controller.js
    > second_controller.js
    > ...
  > helpers
    > index.js
    > useMixinOne.js
    > useMixinTwo.js
    > ...
  > application.js

以下是从与问题相关的文件中摘录的内容:

# config/importmap.rb
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin_all_from "app/javascript/helpers", under: "helpers"


# app/javascript/application.js
import "@hotwired/turbo-rails"
import "controllers"
import "helpers"


# app/javascript/controllers/first_controller.js
import { Controller } from "@hotwired/stimulus"
import { useMixinOne, useMixinTwo } from "helpers"
// Connects to data-controller="first"
export default class extends Controller {
  connect() {
    useMixinOne(this);
    ...
  }
}


# app/javascript/helpers/index.js
export * from "./useMixinOne"
export * from "./useMixinTwo"
...


# app/javascript/helpers/useMixinOne.js
export const useMixinOne = controller => {
  Object.assign(controller, {
    customFunctionFromOne(event) {
      console.log("Hello from One")
    }
  });
};


# app/javascript/helpers/useMixinTwo.js
export const useMixinTwo = controller => {
  Object.assign(controller, {
    customFunctionFromTwo(event) {
      console.log("Hello from Two")
    }
  });
};

...

当我在开发中使用上面的内容时,它起作用了.

然而,当我在生产中使用它时,它不起作用:在浏览器控制台中,我收到如下错误

GET https://www.mywebsite.com/assets/helpers/useMixinOne net::ERR_ABORTED 404 (Not Found)
index-1ee3e17fa548653761aab66bd7ab6d677cc5dc8be43616b1c86e694aee4c4b27.js:1 

GET https://www.mywebsite.com/assets/helpers/useMixinTwo net::ERR_ABORTED 404 (Not Found)
index-1ee3e17fa548653761aab66bd7ab6d677cc5dc8be43616b1c86e694aee4c4b27.js:1 

...

怎么了?如何使用Importmap解决与helpers个JSassets资源 相关的错误?

推荐答案

同样的规则适用于exportimport.不要使用相对名称:

export * from "./useMixinOne"
//             ^^^^^^^^^^^^^
// this is a module name, just like for imports

如果您的导入映射中没有匹配的名称,则不会将其映射到相应的摘要assets资源 URL,该URL仅在开发中起作用.您的导入/导出需要与导入映射中的内容匹配:

$ bin/importmap json
{
  "imports": {
...
    "helpers":             "/assets/helpers/index-ab104765b4187e301d3391fb535a15e3754cb6b938bcfecd7984a44a0f1d0628.js",
    "helpers/useMixinOne": "/assets/helpers/useMixinOne-4e3c8cd641eae1b19feb43fb775e422c931fd9b40d74ba295881069447d1af59.js",
//  ^^^^^^^^^^^^^^^^^^^^^
}
// app/javascritp/helpers/index.js

export * from "helpers/useMixinOne"

从技术上讲,如果您愿意,可以使用相对名称:

# config/importmap.rb

pin_all_from "app/javascript/helpers", under: "/assets/helpers", to: "helpers"

这将为您提供此重要映射:

$ bin/importmap json
{
  "imports": {
...
    "/assets/helpers":             "/assets/helpers/index-6f4938f0e494428e95c0211ec9aa57b42a0021726bcf0de91f1eb7c128a971c3.js",
    "/assets/helpers/useMixinOne": "/assets/helpers/useMixinOne-4e3c8cd641eae1b19feb43fb775e422c931fd9b40d74ba295881069447d1af59.js"
}

并让你的亲戚名字起作用:

// app/javascritp/helpers/index.js

export * from "./useMixinOne"
// app/javascript/controllers/first_controller.js

import { useMixinOne } from "../helpers"

100

Javascript相关问答推荐

我不知道为什么setwritten包装promise 不能像我预期的那样工作

Phaser 3 console. log()特定游戏角色的瓷砖属性

如何在angular中从JSON值添加动态路由保护?

为什么当我解析一个promise时,输出处于挂起状态?

未捕获错误:[]:getActivePinia()被调用,但没有活动Pinia.🍍""在调用app.use(pinia)之前,您是否try 使用store ?""

如何在输入元素中附加一个属性为checkbox?

还原器未正确更新状态

如何从HTML对话框中检索单选项组的值?

使用领域Web SDK的Vite+Vue应用程序中的Web程序集(WASM)错误

确保函数签名中的类型安全:匹配值

为什么我的自定义元素没有被垃圾回收?

与svg相反;S getPointAtLength(D)-我想要getLengthAtPoint(x,y)

如何在Java脚本中对列表中的特定元素进行排序?

无法读取未定义的属性(正在读取合并)-react RTK

表单数据中未定义的数组键

扩散运算符未按预期工作,引发语法错误

在对象的嵌套数组中添加两个属性

使用python,我如何判断一个html复选框是否被隐藏,以及它是否被S选中?

将匿名函数附加到链接的onClick属性

如何在preLoad()中自定义p5.js默认加载动画?