TL;DR What is the proper way of extending jQuery object with plugins, exposing it globally and using external AMD libs with ES6 modules in webpack? Is webpack the right tool for the task, or would SystemJs suit the situation of refactoring a legacy app to ES6 modules better?

I am trying to wrap my head around working with webpack and ES6 modules. I have a legacy mostly jquery app that I am currently converting. I am facing the following challenges:

1. finding best practices in the webpack/babel-loader workflow
2. figuring out which loader/plugin to use for which purpose
3. getting AMD resources like jquery and jquery plugins to play nice with the rest of the modules.
4. exposing jquery globals, extended with all the plugins and jquery-ui

I have relied on the following resources: This great answer explains a lot, though it does not mention the exports loader, which I am mostly relying on:

.html - the documentation lists many possibilities, but i lack the experience to decide which one is the right one. It seems to be preferred to use the ProvidePlugin instead of the expose-loader. Sadly I didn't get it to work with an extended jQuery object. Neither did it work for the use of module functions invoced in <script> tags.

I still struggle to find programatic solutions and decide which webpack plugin is the right one for the job. Some advice or examples from an experienced webpack user are greatly appreciated.

In my webpack.config.js i have the following loaders to expose jquery and transpile with babel:

module: {
    loaders: [
        { 
            test: /\.js$/, 
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {modules: 'mon'}
        },
        {
            test: /jquery\.js$/,
            exclude: /node_modules/,
            loader: 'expose?jQuery',
        },
        {
            test: /jquery\.js$/,
            exclude: /node_modules/,
            loader: 'expose?$',
        },
        {
            test: /[\/\\]vendor[\/\\]jquery.sparkline\.js$/,
            loader: "imports?define=>false"
        }
    ]
},
amd: { jQuery: true },
// plugins: [
//     new webpack.ProvidePlugin({
//        $: 'jquery',
//        jQuery: 'jquery',
//        'window.jQuery': 'jquery',
//        'root.jQuery': 'jquery'
//    })
// ], ...

In my entry.js file I include jquery in the following way:

import 'expose?jQuery!expose?$!./vendor/jquery';
import './jquery/jquery-ui';
import './vendor/jquery.sparkline';

I had to ment out the ProvidePlugin, when i use it, the jQuery is not extended with custom plugins anymore, any idea why that is the case? Does it have to do with the plugins using ES6 module syntax?

I had to add loader: "imports?define=>false" for jquery.sparkline.js to get it to be recogniced. Is this really necessary, or is there a better way to do it?

Concerning jquery-ui i had to find an old version that did not use AMD define to get it to add to the jquery object. What would be the right way to do it?

Any help and advice is greatly appreciated, a reason to switch to SystemJs and Jspm might also be a solution.

TL;DR What is the proper way of extending jQuery object with plugins, exposing it globally and using external AMD libs with ES6 modules in webpack? Is webpack the right tool for the task, or would SystemJs suit the situation of refactoring a legacy app to ES6 modules better?

I am trying to wrap my head around working with webpack and ES6 modules. I have a legacy mostly jquery app that I am currently converting. I am facing the following challenges:

1. finding best practices in the webpack/babel-loader workflow
2. figuring out which loader/plugin to use for which purpose
3. getting AMD resources like jquery and jquery plugins to play nice with the rest of the modules.
4. exposing jquery globals, extended with all the plugins and jquery-ui

I have relied on the following resources: This great answer explains a lot, though it does not mention the exports loader, which I am mostly relying on: https://stackoverflow./a/28989476/2613786

http://webpack.github.io/docs/shimming-modules.html - the documentation lists many possibilities, but i lack the experience to decide which one is the right one. It seems to be preferred to use the ProvidePlugin instead of the expose-loader. Sadly I didn't get it to work with an extended jQuery object. Neither did it work for the use of module functions invoced in <script> tags.

I still struggle to find programatic solutions and decide which webpack plugin is the right one for the job. Some advice or examples from an experienced webpack user are greatly appreciated.

In my webpack.config.js i have the following loaders to expose jquery and transpile with babel:

module: {
    loaders: [
        { 
            test: /\.js$/, 
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {modules: 'mon'}
        },
        {
            test: /jquery\.js$/,
            exclude: /node_modules/,
            loader: 'expose?jQuery',
        },
        {
            test: /jquery\.js$/,
            exclude: /node_modules/,
            loader: 'expose?$',
        },
        {
            test: /[\/\\]vendor[\/\\]jquery.sparkline\.js$/,
            loader: "imports?define=>false"
        }
    ]
},
amd: { jQuery: true },
// plugins: [
//     new webpack.ProvidePlugin({
//        $: 'jquery',
//        jQuery: 'jquery',
//        'window.jQuery': 'jquery',
//        'root.jQuery': 'jquery'
//    })
// ], ...

In my entry.js file I include jquery in the following way:

import 'expose?jQuery!expose?$!./vendor/jquery';
import './jquery/jquery-ui';
import './vendor/jquery.sparkline';

I had to ment out the ProvidePlugin, when i use it, the jQuery is not extended with custom plugins anymore, any idea why that is the case? Does it have to do with the plugins using ES6 module syntax?

I had to add loader: "imports?define=>false" for jquery.sparkline.js to get it to be recogniced. Is this really necessary, or is there a better way to do it?

Concerning jquery-ui i had to find an old version that did not use AMD define to get it to add to the jquery object. What would be the right way to do it?

Any help and advice is greatly appreciated, a reason to switch to SystemJs and Jspm might also be a solution.

• javascript
• webpack
• babeljs

• 3 "any idea why that is the case" --- because it creates another instance of jquery. I'm currently in debugger and for ProvidePlugin it creates module aliases that physically refer to different objects. – zerkms Commented Apr 10, 2015 at 3:43
• Ok, that is also how I thought it was the case. Just wished that the provided jquery had also all the extensions that have previously been made. Also, I am wondering why the use of the ProvidePlugin is encouraged, well i guess that is fine if you do not need to use "real" globals on the window object. Just not fitting for my use case. – RemEmber Commented Apr 10, 2015 at 13:00
• To keep things nicer you can push that imports loader config to webpack.config.js. It seems to me that could be the way to for you. – Juho Vepsäläinen Commented May 8, 2015 at 17:21

1 Answer 1

I have had issues with this and it seems that it was because some plugins assume $ and others assume jQuery, but the following eventually worked for me, even if it is rather ugly:

Edit, note that I'm testing for plugins which are named jquery.xyz.js, you'd have to adjust the regex appropriately. Also, I'm not sure if the two different expose loaders for jQuery are causing issues, but so far this works.

// webpack.config.js
...
"module": {
    "loaders": [
        {
            test: require.resolve("jquery"),
            loader: "expose?$!expose?jQuery"
        },
        {
            test:   /jquery\..*\.js/,
            loader: "imports?$=jquery,jQuery=jquery,this=>window"
        }
...