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

Question

有人可以向我解释一下如何从 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 已经编译的函数。

Answer 1

看来你是：

将您的函数映射到 window，在 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 再一次

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

Access app.js function in adonisjs edge template

frontend

adonis.js