longestdrive's avatar

updating js library/plugins to work with es6 mix

Hi I'm trying to catch up with es6 and start using laravel mix for my assets and JS scripts. I've got mix up and running and trying now to import jquery, bootstrap and a number of plugins into my pages rather than import them through script tags

Here's an example of my scripts:

import $ from 'jquery';
window.$ = window.jQuery = $;

import('jquery-ui');
import('bootstrap');
import('jquery.uniform');
// import('popover');

export var App = function() {

    var currentPage = ''; // current page
    var collapsed = false; //sidebar collapsed
    var is_mobile = false; //is screen mobile?
    var is_mini_menu = false; //is mini-menu activated
    var is_fixed_header = false; //is fixed header activated
    var responsiveFunctions = []; //responsive function holder

// plus a lot more code and functions i've removed for brevity

}

In my mix script I have this:

mix.js('resources/js/src/core/base-script.js', 'public/js/core')
    .extract(['bootstrap', 'jquery-ui', 'jquery.uniform']);

and then in my page I have:

<script src="/js/core/manifest.js"></script>
<script src="/js/core/vendor.js"></script>
<script src="/js/core/base-script.js"></script>

But I'm then getting errors on my page:

Confirmation requires popover.js
Uncaught ReferenceError: App is not defined

popover.js should be part of bootstrap, and App is the main script I'm trying to import

so: What's the best approach to importing js packages - should I just leave them as they are and import the old way using script tags? How should I convert my existing scripts/modules to be compatible with es6

I'm going through the tutorials on laracasts but havent found anything (yet) on importing packages

Any help appreciated - trying to refactor my messy js code base so want to bring it up to date

Thanks

0 likes
0 replies

Please or to participate in this conversation.