Laravel混合.extract法

Question

嗨，我用的是我的Laravel5.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');

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

供应商抽取-将所有特定于应用程序的JavaScript与供应商库捆绑在一起的一个潜在缺点是，它会使长期缓存变得更加困难。例如，应用程序代码的一次更新将迫使浏览器重新下载所有供应商库，即使它们没有更改。 如果您打算频繁更新应用程序的JavaScript，则应考虑将所有供应商库提取到它们自己的文件中。这样，对应用程序代码的更改不会影响大型vendor.js文件的缓存。Mix的提取方法让这件事变得轻松起来：

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

提取方法接受希望提取到vendor.js文件中的所有库或模块的数组。使用上面的片段作为示例，Mix将生成以下文件：

• Public.js: Webpack清单运行时
• public/js/vendor.js:您的供应商库
• public/js/app.js:您的应用程序代码为了避免JavaScript错误，请确保按正确的顺序加载这些文件：

<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安装了引导程序、jquery和pace。

Answer 1

对于vue，jquery插件有一定的冲突。

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