We have an Angular 2 application that we would like to start using AOT compilation for. Simple enough... except for one of my dependencies...
We use autobahn.js for communicating to our servers over a web socket connection. The issue is with loading this dependency in rollup.
The authors of autobahn.js have decided that for their browser version of the library they will host it in bower (fair enough) instead of npm.
We have a library that wraps autobahn.js with some nice utilities and handles other things for us. This is great because it is a universal solution. This library can be used in both the browser and in our node.js servers. (yay)
However the node version of autobahn
uses fs
, url
, and other node specific features. (boo)
The bower
version of their library uses the correct equivalents for the browser which is good.
In the wrapper we have an import * as autobahn from 'autobahn';
(we use typescript) This works great in node, and also worked ok with some configuration in SystemJS.
How does one tell rollup
(or the rollup-plugin-commonjs
) to point to the bower_components/autobahnjs/autobahn.js
file instead of the node_modules/autobahn/index.js
file as it does by default.
import rollup from 'rollup';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import uglify from 'rollup-plugin-uglify';
export default {
entry: 'dist/iss/index.js',
dest: 'dist/iss/bundle.js',
sourceMap: false,
format: 'iife',
moduleName: 'statusMonitor',
external: [
'autobahn',
'moment',
'moment-timezone'
],
context: 'window',
plugins: [
nodeResolve({jsnext: true, module: true, browser: true}),
commonjs({
include: 'node_modules/**'
}),
json(),
uglify()
]
}
Another option that would work for us is that autobahn
also works as a global, and if we could patch rollup to use the global autobahn
off window
then that would work for our use case.
There's a rollup-plugin-bower-resolve plugin which is analogous to node-resolve – if you include that in your plugins
array before node-resolve (or use the skip
option in node-resolve) then it should be able to find autobahn
.