Question

我将webpack与encore一起使用，我试图在webpack条目中定义可重用的函数并在模板上重复使用

资产/ 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

您可以将其添加到窗口中，并在模板中的任何位置使用它：

function enableAjaxModal (elem) {
    // your code
}

window.enableAjaxModal = enableAjaxModal ;

Answer 2

您正在enableAjaxModal对象中扩展global功能。

您应该将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导入语法ES6，我不知道为什么，因为我检查过并且语法正确...

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

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

3 个答案: