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

我正在尝试在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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)