【问题标题】:Laravel mix .extract methodLaravel 混合 .extract 方法
【发布时间】:2018-02-17 08:03:56
【问题描述】:

您好,我正在使用 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');

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

供应商提取 - 将所有特定于应用程序的 JavaScript 与供应商库捆绑在一起的一个潜在缺点是它 使长期缓存更加困难。例如,单个更新 到您的应用程序代码将强制浏览器重新下载所有 您的供应商库,即使它们没有更改。

如果您打算频繁更新应用程序的 JavaScript,您应该考虑提取所有供应商 库到他们自己的文件中。这样,对您的应用程序的更改 代码不会影响大型 vendor.js 文件的缓存。混合的 extract 方法使这变得轻而易举:

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

extract 方法接受一个包含所有库或模块的数组 您希望提取到 vendor.js 文件中。使用上面的 sn-p 作为 例如,Mix 会生成以下文件:

  • public/js/manifest.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 安装了 bootstrap、jquery 和速度。

【问题讨论】:

    标签: laravel laravel-5 laravel-mix


    【解决方案1】:

    【讨论】:

    • 我没有使用 vue
    • 我的错误是我读了这一行并面临同样的问题 -> mix.js('resources/assets/js/app.js', 'public/js').extract(['vue' ])
    猜你喜欢
    • 2014-07-30
    • 1970-01-01
    • 2017-10-22
    • 1970-01-01
    • 2020-02-11
    • 2013-03-23
    • 2017-09-11
    • 2017-07-25
    • 2017-07-17
    相关资源
    最近更新 更多