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

Question

我正在尝试在我的 Laravel 5.4 项目(使用 Laravel 样板)中定义 javascript 函数。我有一个带有函数的 custom.js 文件。

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

此文件通过 webpack.mix.js 包含在 Assets 中，编译后可在 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')

我刚得到第二个相同的文件。

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

Answer 1

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中，你可以使用script函数来编译它。

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