Laravel 使用 webpack 混合导入 javascript 自定义文件答案

【问题标题】：Laravel import javascript custom file with webpack mixLaravel 使用 webpack 混合导入 javascript 自定义文件
【发布时间】：2017-09-20 21:31:49
【问题描述】：

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

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

该文件通过 webpack.mix.js 包含在 assets 中，编译后在 frontend.js 中正确找到。

问题：

函数未定义：未捕获的 ReferenceError：未定义 displayDef

函数存在于编译的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 函数？

【问题讨论】：

标签： javascript laravel webpack

【解决方案1】：

mix中的js()函数用于编译模块捆绑文件。

来自 Laravel 网站：

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

通过这行代码，您现在可以利用：

ES2015 语法。

模块

.vue 文件的编译。

生产环境的缩小。

如果这个函数是在旧版javascript中，你可以使用script函数来编译它。

此选项对于不需要为 JavaScript 编译 Webpack 的遗留项目特别有用。

更多信息请点击这里：https://laravel.com/docs/5.4/mix#working-with-scripts

【讨论】：

这已经是我正在做的事情了。我从原来的 420B 函数中得到了一个 260kB 的 js 文件，这两个函数没有全局定义。如何在我的视图中访问它们？
使用script函数代替js。
谢谢，它处理了文档中没有的一些细节。但是，我不明白为什么这是一种传统的做事方式。那么将javascript添加到项目的正确方法是什么？
@NicolasBernard 你能解释一下吗？
mix.scripts('resources/assets/js/chinese.js', 'public/js/chinese.js');我不记得那是一年前的事了@AlineMatos

【解决方案2】：

在您的项目根目录中，运行更新

npm 更新

【讨论】：