我如何使用Babel和Typescript在Webpack上公开一个jQuery插件

Question

I've been trying for hours to make the following code to work without success.

Step 1 Library building

I've a lot of es6 code build with typescript. I compile them to get a js lib using babel and typescript. Everything works so far. At the top of my lib i've a wrapper that gives me fast access to the lib main component using a jquery extension :

require('jquery');

$.fn.extend({
  saidashboard : function (options: SAIDashboardConfig) {
    let builtEntry: SAIDashboardView;
    /* ... some code ... */
    return builtEntry;
  }
});

Step 2 testing

I've a test file that is supposed to test the library. In the test-empty.js file, i load some json descriptor and try to init my object with it

'use strict';

var chai = require('chai');
var $ = require("jquery");
var fs = require('fs');
require('../dist/sai-dashboard');

chai.should();

var newDash;

before( function(done) {
  try{
    fs.readFile('./tests/resources/descriptors/empty-dashboard.json', 'utf8', function (err,data) {
        if (err) {
            done(new Error(err));
        } else {
            var newDashEl = $('<div></div>').addClass('dashboard-test-container');
            newDash = newDashEl.saidashboard(JSON.parse(data));
            done();
        }
    });
  }catch(e){
    done(e);
  }
});

The problem

I can't stop getting the following error

Uncaught TypeError: newDashEl.saidashboard is not a function

It's like if my $.fn.extend was calling it on a different instance of jquery than the one i'm the using.

I'm launching the tests using :

mocha-webpack --require setup-test.js --require source-map-support/register --webpack-config webpack.config-test.js tests/test-empty.js

Here is the setup.js file :

const JSDOM = require('jsdom').JSDOM;

const { document } = (new JSDOM('')).window;
global.document = document;
global.window = document.defaultView;
window.console = global.console;

Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js'
};

And webpack.config-test.js

var nodeExternals = require('webpack-node-externals');

module.exports = {
  output: {
  // sourcemap support for IntelliJ/Webstorm 
    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
    devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
  },
  target: 'node', // in order to ignore built-in modules like path, fs, etc. 
  externals: [nodeExternals()], // in order to ignore all modules in node_modules folder 
  devtool: "cheap-module-source-map" // faster than 'source-map' 
};

Any idea?

Thanks

Answer 1

So what I ended up having to do with a couple projects that were heavily dependent on some jQuery plugins is use the expose-loader and script-loader. The following ensured I had access to jQuery and it's associated plugins globably.

// Example of my app.includes.js
require('expose-loader?jQuery!jquery');
require('expose-loader?$!jquery');

// Then require your plugins using the script-loader to execute them
// so they are part of the global jQuery object.
require('script-loader!your/jQuery/plugin/here')

I then had to require the app.includes.js into my webpack entry app.js

// app.js
require('./app.inlcudes');

It shouldn't hurt anything to change the requires to imports, you may be able to get away with including the expose-loader in your webpack.config.js rules as well. I have some very specific reasons why mine is being used inline with the require.

• https://www.npmjs.com/package/expose-loader
• https://www.npmjs.com/package/script-loader