在 adonisjs 边缘模板中访问 app.js 函数答案

【问题标题】：Access app.js function in adonisjs edge template在 adonisjs 边缘模板中访问 app.js 函数
【发布时间】：2021-08-14 12:40:49
【问题描述】：

有人可以向我解释一下如何从 app.js 文件访问 .edge 模板中的函数吗？

在resources/js/app.js我有

function myFunc() {
    console.log("works???")
}

在我有的边缘模板中

<a href="#" onclick="myFunc(); return false;">Some click</a>

我得到了错误

VM6192 :19 Uncaught ReferenceError: myFunc is not defined
at HTMLAnchorElement.onclick (VM6192 :19)

请注意，我有

<!-- Renders scripts -->
@entryPointScripts('app')

并且函数在http://localhost:8080/assets/app.js路径中

我确实设法在 app.js 中执行了类似 window.myFunc = myFunc 的操作，但我需要调用一些异步函数，并且我想要 webpack 已经编译的函数。

【问题讨论】：

标签： frontend adonis.js

【解决方案1】：

看来你是这样做的：

将您的函数映射到窗口，在 app.js 文件 (window.myFunc = myFunc) 中，或
为你想要的按钮添加一个事件监听器 document.getElementById('my-btn').addEventListener('click', myFunc);

为了让 es6 正常工作，有 async/await 之类的特性，你需要添加 babel；

安装 babel polyfill：https://babeljs.io/docs/en/babel-polyfill#installation
安装core-js：https://github.com/zloirock/core-js#installation

使用此配置创建一个.babelrc 文件

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
           "edge": "17",
           "firefox": "60",
           "chrome": "67",
           "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.16"
      }
    ]
  ]
}

再次运行node ace serve --watch

【讨论】：