在模板页面上使用 webpack 中定义的函数

Question

我将 webpack 与 encore 一起使用，我正在尝试在 webpack 条目中定义一个可重用函数并在模板中重用它

assets/js/app.js:

import {$, jQuery} from 'jquery';
import 'modaal/dist/js/modaal';
import 'foundation-sites';

global.enableAjaxModal = function enableAjaxModal(selector) {
    $(selector).modaal({
        type: 'ajax'
    })
};

webpack.config.js:

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .addStyleEntry('css/app', './assets/css/global.scss')
    .enableSassLoader()
    .autoProvidejQuery()
    .addEntry('js/app', './assets/js/app.js')
;

module.exports = Encore.getWebpackConfig();

twig_template_page:

<script src="{{ asset('build/js/app.js') }}"></script>
<script type="text/javascript">
    enableAjaxModal('.modaal-new-experience')
</script>

我得到：

Uncaught ReferenceError: enableAjaxModal is not defined

Answer 1

您可以像这样将它添加到 window 并在您的模板中的任何位置使用它：

function enableAjaxModal (elem) {
    // your code
}

window.enableAjaxModal = enableAjaxModal ;

Answer 2

您正在 global 对象中扩展 enableAjaxModal 函数。

您应该使用 global 关键字作为

来调用它

global.enableAjaxModal('.modaal-new-experience')

另一种方法是将其扩展为 jQuery 作为

$.enableAjaxModal = function (selector) {
    $(selector).modaal({
        type: 'ajax'
    })
};

用法

$.enableAjaxModal('.modaal-new-experience')

更新

我现在明白问题所在了。 global 是 node.js 中的保留关键字，表示一个接口。 global 基本上是一个接口。所以当你做 global.myFunction() 它不会找到它，因为它在 interface Global.

中没有定义

不过，您仍然可以修改它，将您自己的函数作为成员属性放在这个接口中。

当您转到 global 的定义时，它将进入其配置文件，该文件的名称类似于 index.d.ts 或 vendor.d.ts .

查找接口interface Global

扩展你的功能

interface Global {
  enableAjaxModal:any
}

现在你可以随处使用这个功能了。

Answer 3

最后我通过替换 app.js 的第一行解决了这个问题：

import {$, JQuery) from 'jquery';

作者：

global.$ = global.jQuery = require('jquery');

我认为问题是 JQuery import syntax ES6，我不知道为什么，因为我检查过并且语法是正确的...

无论如何感谢@Manoj 和@WhiteRabbit 的帮助，我很感激。

在模板页面上使用 webpack 中定义的函数

use function defined in webpack on template page

webpack

webpack-encore