Question

我正在研究Laravel / VueJs项目，并且尝试使用Laravel mix API编译我的js文件。

直到现在，它都运行良好，我只是像这样链接我的资产：

mix.js('path/to/asset/index.js', 'public/js/apps/my_asset.js')
    .js('path/to/asset_2/index.js', 'public/js/apps/my_asset_2.js')
    .js('path/to/asset_3/index.js', 'public/js/apps/my_asset_3.js')
    ...

但是随着我将越来越多的文件添加到列表中，该解决方案并不令人满意。因此，我决定使该过程自动化。

我想要做的是读取目录的内容，并找到我要编译的所有.js文件。然后，我遍历此数组并在每个文件上运行mix.js()。我的代码如下：

const readdir = require('readdir-enhanced');    
readdir('resources/assets/js/modules/', {deep: 2}, (err, files) => {
    files.map(file => {
        if (file.match(/index\.js$/)) {
            const moduleName = file.replace('/index.js', '');
            mix.js(`resources/assets/js/modules/${file}`, `public/js/${env}/apps/${moduleName}_app.js`)
        }
    });
});

问题是mix.js()不起作用，没有生成输出文件。

当我console.log()进入循环时，它可以工作，因此可以肯定，我进入了循环。我还检查了变量file，env和moduleName的值，它们是正确的（因此问题并非出自我的路径）。

我猜mix.js()不能在循环中运行，是否有人已经迷惑了这个问题？并且您找到了解决方案吗？

先谢谢您了:)

Answer 1

实际上是异步回调存在问题，我没有仔细阅读readdir-enhanced的文档。为了解决该问题，我只使用了同步功能来读取目录：

let files = readdir.readdirSync('resources/assets/js/modules/', {deep: 2});
files.map(file => {
    if (file.match(/index\.js$/)) {
        const moduleName = file.replace('/index.js', '');
        mix.js(`resources/assets/js/modules/${file}`, `public/js/${env}/apps/${moduleName}_app.js`);
    }
});

谢谢你！为我指出正确的方向：）

循环内的Laravel mix.js不输出任何内容

1 个答案: