Using non ES6 modules

[Tjeerd]

Has anyone found a way to use non ES6 modules? I would like to use some npm packages in the companion app.

From the documentation of rollup.js I understand it offers plugins for that, can those be used for instance?

[Tjeerd]

Got npm module working by using require, bundling code offline with Browserify and then paste it in the online editor. Not an ideal workflow.

Would be nice if modules could be imported from another file in Fitbit Studio using either import or require.

Any ideas on how to convert or wrap modules another way?

[Tjeerd · Accepted solution]

I found the answer, an acceptable solution that allows to import bundled code by Browserify as an ES6 module.

1. Create a file with all the npm modules you want to use, I called it libs_src.js: 

var answer = require('the-answer');

2. Bundle the file with Browserify to a single file, on the command line:

$ browserify libs_src.js -o libs.js

3. Open the newly created file (I called it libs.js) and edit it so that you can export the module variables as globals. In this example you edit it like this (changes in bold):

//Add variable declaration and export
export var answer;

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

//Remove variable declaration
//var answer = require('the-answer');
answer = require('the-answer');

},{"the-answer":2}],2:[function(require,module,exports){
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.theAnswerToTheQuestionOfLifeTheUniverseAndEverything = factory());
}(this, (function () { 'use strict';

var index = 42;

return index;

})));

},{}]},{},[1]);

4. Import the npm libraries as es6 modules in your code:

import {answer} from './libs.js';
console.log( 'the answer is ' + answer );

[SunsetRunner]

Hi Tjeerd

Good find! This works for some modules, but with one like this https://www.npmjs.com/package/js-sha512, I'm a bit lost as to which changes I need to make in the resulting libs.js. It seems to use a different syntax than the others.

fisken

[LiamFitbit]

If you're looking to use 3rd party npm packages, you might want to look at the CLI tools, since those support importing npm packages (both ES6 and commonjs) natively!

[SunsetRunner]

I am using the CLI tool for building and installing the app. But how does it help including libraries? You mean it automatically includes imported libraries when running the build command?