Laravel 混合 .extract 方法

Question

嗨，我正在将 Laravel mix 与我的 Laravel 5.5 一起使用

我有这样的混合文件:

/* Production settings */
if (mix.inProduction()) {
    mix.version();
    mix.disableNotifications();
}
/* Sass Processing */
mix.sass('resources/assets/sass/_bootstrap.scss', 'public/css/bootstrap.css');
mix.sass('resources/assets/sass/navigation.scss', 'public/css/navigation.css');
mix.sass('resources/assets/sass/global.scss', 'public/css/global.css').options({
    processCssUrls: false
});
mix.sass('resources/assets/sass/cards.scss', 'public/css/cards.css')
    .sass('resources/assets/sass/forms.scss', 'public/css/forms.css')
    .sass('resources/assets/sass/search.scss', 'public/css/search.css')
    .sass('resources/assets/sass/profile.scss', 'public/css/profile.css')
    .sass('resources/assets/sass/event.scss', 'public/css/event.css')
    .sass('resources/assets/sass/entity.scss', 'public/css/entity.css')
    .sass('resources/assets/sass/travel.scss', 'public/css/travel.css')
    .sass('resources/assets/sass/sliders.scss', 'public/css/sliders.css')
    .sass('resources/assets/sass/login.scss', 'public/css/login.css');

mix.styles([
    'resources/assets/css/bootstrap-social.css',
    'resources/assets/css/dropzone.css',
    'resources/assets/css/jquery-ui.css',
    'resources/assets/css/jquery-ui.structure.css',
    'resources/assets/css/jquery-ui.theme.css',
    'resources/assets/css/font-awesome.css',
    'resources/assets/css/animate.css',
], 'public/css/style.css');

/* Global JS */
mix.scripts([
    'resources/assets/js/pace.js',
    'resources/assets/js/jquery.js',
    'resources/assets/js/page-load.js',
    'resources/assets/js/bootstrap.js',
    'resources/assets/js/jquery-ui.js',
    'resources/assets/js/favourites.js',
], 'public/js/global.js');

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

mix.js('resources/assets/js/image-upload.js', 'public/js/image-upload.js');

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

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

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

mix.js('resources/assets/js/search.js');

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

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

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

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

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

我想要做的是使用文档中提到的提取方法:

Vendor Extraction - One potential downside to bundling all application-specific JavaScript with your vendor libraries is that it makes long-term caching more difficult. For example, a single update to your application code will force the browser to re-download all of your vendor libraries even if they haven't changed.

If you intend to make frequent updates to your application's JavaScript, you should consider extracting all of your vendor libraries into their own file. This way, a change to your application code will not affect the caching of your large vendor.js file. Mix's extract method makes this a breeze:

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

The extract method accepts an array of all libraries or modules that you wish to extract into a vendor.js file. Using the above snippet as an example, Mix will generate the following files:

• public/js/manifest.js: The Webpack manifest runtime
• public/js/vendor.js: Your vendor libraries
• public/js/app.js: Your application code To avoid JavaScript errors, be sure to load these files in the proper order:

<script src="/js/manifest.js"></script> 
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

所以我在以下位置创建了一个空文件: resources/assets/js/app.js在我的 webpack 中:

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

一切都在成功处理，我附上了所有的文件。 app.js 似乎有必需的内容但是当我到达页面时显然没有定义 jquery。

可能是什么原因？我已经通过 npm 安装了 bootstrap 、jquery 和速度。

Answer 1

与vue、jquery插件有一定的冲突

https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/