Using seajs Modules in webpack Projects

Preface

Recently I used a frontend library (kityminder) built with seajs+grunt. But in non-seajs projects, using import or require directly cannot bring in any module — yet you can’t drag seajs in just for this one library. This post explores a way to reference seajs modules. I’m not a professional frontend dev; please point out problems in the comments.

Installing kityminder-core

kityminder is a mind-map visualization tool open-sourced by Baidu; it can generate effects like the following in a web page:

When we want to bring it into our own project with npm install, we can simply run

npm install kityminder-core

After installation, it can be seen in node_modules/kityminder-core/.

First Use of kityminder

Using require/exports directly, we cannot obtain this module. Take the following code as an example:

import * as kity from "kity";
import * as kityminder from "kityminder-core";

console.log("Get kity", kity);
console.log("Get kityminder", kityminder);

You’ll get this result. Without doubt, subsequent calls to kityminder.Minder will definitely error, because the imported kityminder module has no properties at all.

Reading kityminder-Related Code

Why did our import reference fail, when the packaged code module clearly already contains kityminder?

In node_modules/kityminder-core/dist/kityminder.core.js, the definition is roughly like this:

(function () {
  // ...
  var moduleMapping = {
      "expose-kityminder": 34
  };
  
  function use(name) {
      _p.r([ moduleMapping[name] ]);
  }
  use('expose-kityminder');
})();

Next let’s look at expose-kityminder:

define('expose-kityminder', function(require, exports, module) {
    module.exports = window.kityminder = require('./kityminder');
});

Although the function has module.exports, we cannot obtain this function’s module.exports from the outer layer. Fortunately there’s window.kityminder here, saving the module’s information for us.

A Workable Approach

Therefore, we can’t count on the value obtained by direct import. Instead, after importing, we should use the kityminder stored in the window variable.

The final code is as follows:

import "kity";
import "kityminder-core";

const kity = window.kity;
const kityminder = window.kityminder; // The kity has been imported as a window member.

console.log("Get kity", kity);
console.log("Get kityminder", kityminder);

Summary

This way you can get the real module. I don’t know whether I’ll touch seajs again in the future; from the current usage trend, fewer and fewer libraries should depend on seajs. This time I was forced to look at the library’s code. If you need to, you can even npm install seajs and look at the seajs-debug code. For large projects, this way of dynamically loading another Javascript file may be something we need.