javascript - 无法在带有 webpack 的 Laravel 5.7 刀片模板中使用带有一些 jQuery 的旧 JS 函数 - 找不到方法

Question

我正在使用已经完成一些结构的 Laravel 5 Boilerplate。

我想从刀片中调用一个简单的 JavaScript 方法。这是我所做的：

1）创建的文件名为test123.js

内容test123.js：

function test123() {
    $(document).ready(function () {
        console.log('hello from test123');
    });
}

2）我打开现有app.js并添加：

import './test123';

3）我打了电话npm dev run——全是绿色的，一切正常。

4）在刀片index.blade.php中我输入：

@push('after-scripts')
    <script>
        test123();
    </script>
@endpush

我去了编译文件：

<script src="http://foo.local/js/backend.js?id=8dbe74e012c3122422da"></script>

我的方法在那里：

但是它不可见。

我猜是关于范围的？我不想让它成为window.test123。我是不是该？我只想定义好的旧 JS / jQuery 方法并仅在特定模板中需要时调用它。

“现代” JS 不是我的强项，因为我觉得它非常复杂。我没有碰过 default webpack.mix.js。

mix.setPublicPath('public');

mix.sass('resources/sass/frontend/app.scss', 'css/frontend.css')
    .sass('resources/sass/backend/app.scss', 'css/backend.css')
    .js('resources/js/frontend/app.js', 'js/frontend.js')
    .js([
        'resources/js/backend/before.js',
        'resources/js/backend/app.js',
        'resources/js/backend/after.js'
    ], 'js/backend.js')
    .extract([
        'jquery',
        'bootstrap',
        'popper.js/dist/umd/popper',
        'axios',
        'sweetalert2',
        'lodash',
        '@fortawesome/fontawesome-svg-core',
        '@fortawesome/free-brands-svg-icons',
        '@fortawesome/free-regular-svg-icons',
        '@fortawesome/free-solid-svg-icons'
    ]);

请帮助我实现这个简单的事情。我知道解决方案可能并不难，但我不知道该怎么办……</p>

谢谢你。

编辑1：我差点忘了。这是样板结构：

编辑 2：用户brk请求更多截图：

标签： javascriptphpjquerylaravelwebpack

Answer 1

尝试显式导出函数：

export function test123() {...}

然后导入它：

import 'test123' from './test123';