CODEWITHSUNDEEP
javascriptecmascript-6webpackes6-module-loader
grssnbchr
grssnbchr

Reputation: 2974

How to import "old" ES5 code in ES6

I have an ES6 application (with Babel 6.5 and Webpack) and it successfully imports my modules like this:

import $ from 'jquery';

I wanted to install https://github.com/robflaherty/riveted/blob/master/riveted.js (a plugin for Google Analytics), but as you can see, the code doesn't have something like module.exports = ..., it only defines a global variable riveted, but it has an apparently valid package.json pointing to riveted.js.

So doing something like 

import riveted from 'riveted'
riveted.init();

throws an error:

_riveted2.default.init is not a function

import riveted from 'riveted'
riveted.init();
import 'riveted'
riveted.init();

throws an error:

riveted is not defined 

import * as riveted from 'riveted'
riveted.init();

throws an error:

riveted.init is not a function

How can I access riveted's init() function?

Upvotes: 28

Views: 35607

Answers (2)

cuixiping
cuixiping

Reputation: 25381

Step 1. modify riveted.js

Add some code after line 18.

    // Browser global
    root = !root && typeof self == 'object' ? self : root; // add this line
    root.riveted = factory();

Because the this is undefined when the file is imported by es6, we use self instead.

self is better than window, it works in both main thread and worker.

Step 2. modify your import path

like this:

    import './riveted.js';
    riveted.init();

The ./ or ../ is required for import js file directly.

Examples:

import `./file.js`
import `../file.js`
import `./a/b/file.js`
import `../a/b/file.js`
import `../../a/b/file.js`

Tested in chrome.

Upvotes: 0

jantimon
jantimon

Reputation: 38140

You can use the webpack exports loader:

var riveted = require("exports?riveted!riveted")

See the shiming modules overview for details

Upvotes: 26

Related Questions