在 laravel-mix 中替代长生不老药 `mix.scriptsIn`

Question

Laravel 5.4 介绍 laravel-mix.
使用长生不老药我有一项任务是将所有供应商文件加载到一个特定的文件中：

elixir(function (mix) {
  mix.stylesIn('public/vendor/css', 'public/css/vendor.css');

  mix.scriptsIn('public/vendor/js', 'public/js/vendor.js');
}

是否可以用 laravel-mix 做同样的事情？

使用 mix.js('/path/to/folder', 'public/js/vendor.js') 我得到一个错误：

Error: EISDIR: illegal operation on a directory

Answer 1

只需使用.extract()方法。

例如:

mix
    .js('resources/assets/js/app.js', 'public/js/app.js')
    .extract([
        'jquery',
    ]);

如果您不使用 CommonJS require 或 ES2015 import 并且您将所有库捆绑在一个文件中，则可以使用 .js() 方法：

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

您还可以使用 .scripts() 连接您的文件：

mix.scripts([
    'public/js/admin.js',
    'public/js/dashboard.js'
], 'public/js/all.js');

别忘了在你的 html 中注入 vendor.js 文件：

<script src="{{ mix('js/vendor.js') }}"></script>

Answer 2

如果对某人有帮助，laravel-mix 有一个 combine 功能，可用于 css 和 js 文件：

//js files
mix.combine(['path/to/folder/js/*'], 'public/js/combined.js');

//and

//css files
mix.combine(['path/to/folder/css/*'], 'public/css/combined.css');

如果每个文件的加载顺序对您来说很重要，最好使用 mix.scripts(...) 或其他一些选项。

我刚在这里找到它：https://laracasts.com/discuss/channels/laravel/mix-combine-all-js-in-folder。

在 laravel-mix 中替代长生不老药 `mix.scriptsIn`

Alternative to elixir `mix.scriptsIn` in laravel-mix

laravel

laravel-elixir

laravel-5.4

laravel-mix