0

在我的webpack.mix.js我有这样的事情：

// vue components
mix.js('resources/assets/js/app.js', 'public/js');

// scripts which I need
mix.scripts([
    'resources/assets/js/jquery-2.2.4.min.js',
    'resources/assets/js/bootstrap.min.js',
    'resources/assets/js/fastclick.js',
    'resources/assets/js/toastr.min.js',
    'resources/assets/js/select2.min.js',
    ...
], 'public/assets/js/scripts.js');

// styles which I need
mix.styles([
    "resources/assets/css/bootstrap-colorpicker.min.css",
    "resources/assets/css/bootstrap-select.min.css",
    "resources/assets/css/bootstrap.min.css",
    "resources/assets/css/select2.min.css",
    ...
], 'public/assets/css/styles.css');

例如，我可以select2在我的 vue 组件之外初始化一个。

但是当我尝试使用这个插件（或我的mix.scripts块的任何脚本）时，我得到下一个错误：

$(...).select2 is not a function

好吧，我搜索了一下，发现了一个“解决方案”，在export default{}我的 vue 组件之前我需要select2脚本：

 ...

import Vue from 'vue';

require('../select2.min.js');

export default{

...

现在它可以在我的 vue 组件内部和外部工作：但是我“导入”了我的 select2 插件两次：

  1. 在我的内部public/assets/js/scripts.js（我需要，因为我使用 select2 和其他没有 vue 组件的插件）
  2. 在我的内部resources/assets/js/app.js（当我运行npm run watch或npm run production编译器将我的 vue 组件的要求添加到此脚本文件中时）

所以，我的问题是：如何让 VUE 中的组件使用来自我的public/assets/js/scripts.js文件的 JQuery 脚本，而不必在每个 vue 组件中要求它们中的每一个？

我希望有办法做到这一点

4

1 回答 1

0

据我所知，webpack.config.jsLaravel mix 的默认值包括 JQuery。所以我评论了下一行（271）webpack.config.js：

/*
new webpack.ProvidePlugin(Mix.autoload || {
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery'
}),
*/

现在，当我显示 JQuery 的内容时，console.info($());我看到了所有插件。

但我认为这有点脏。

有没有官方的方法可以做到这一点？

于 2017-04-12T07:04:25.887 回答