Laravel使用webpack mix导入javascript自定义文件

2023年11月14日 320次阅读

我正在尝试在Laravel 5.4项目中定义
javascript函数(使用Laravel样板文件).

我有一个带有函数的custom.js文件.

function displayDef(){
    $("#worddef").html("Yippee");
}

此文件通过webpack.mix.js包含在资产中,并在编译后在frontend.js中正确找到.

问题：

the function is undefined:
Uncaught ReferenceError: displayDef is not defined

该函数存在于已编译的js文件中：

 /* 36 */
    /***/ (function(module, exports, __webpack_require__) {

    /* WEBPACK VAR INJECTION */(function($) {/* 
     * Local functions
     *
     */

    function displayDef() {
    ...

我不知道我应该如何访问这些功能.
此外,如果我尝试将其放在另一个文件中：

.js([
    'resources/assets/js/chinese.js'
], 'public/js/vendor.js')

我只得到第二个相同的文件.

我很惊讶没有回答这个问题：如何在laravel 5.4中使用mix正确定义和访问javascript函数？

最佳答案 mix中的js()函数用于编译模块捆绑文件.

来自Laravel网站：

mix.js('resources/assets/js/app.js', 'public/js');

With this single line of code, you may now take advantage of:

  • ES2015 syntax.
  • Modules
  • Compilation of .vue files.
  • Minification for production environments.

如果此函数在旧版javascript中,则可以使用脚本函数进行编译.

This option is particularly useful for legacy projects where you don’t require Webpack compilation for your JavaScript.

有关更多信息,请点击此处：https://laravel.com/docs/5.4/mix#working-with-scripts

点赞