• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Webpack, TypeScript, Aurelia and Wallaby.js

Aurelia 1 · April 4, 2016

I have been working with Aurelia for a year now and loving it. I also discovered Wallaby earlier this year and love that as well. I got it to work when I was still using Jspm and System.js in my Aurelia application, but since moved over to Webpack.

Because I am also using TypeScript, it complicated matters a bit getting Wallaby.js to work with Webpack and TypeScript. However, thanks to the help of Artem of Wallaby.js, I got it to work in the end.

The first issue I encountered was loads of errors relating to Map which looked like this: Runtime error: ReferenceError: Can't find variable: Map

Because Wallaby.js is using PhantomJS by default which does not support ES2016 Map you need to add in a polyfill in the form of Babel Polyfill. So first up, you need to install it: npm install babel-polyfill --save-dev then you need to add it into your Wallaby configuration file.

Inside of the files array [], I have the following:

files: [
    {pattern: 'node_modules/babel-polyfill/browser.js', instrument: false},
    {pattern: 'src/**/*.ts', load: false},
    {pattern: 'test/unit/setup.ts', load: false}
],

The first line includes the Babel Polyfill which addresses the PhantomJS issues with future-spec Javascript.

The second and last issue that I encountered was that I was trying to load and use the Webpack configuration file and pass it through to the Wallaby Webpack plugin. Turns out this is the wrong way to go about things because otherwise it attempts to use your defined loaders and in my case, I am using the ts-loader plugin and it breaks things with Wallaby.

My final Wallaby.js file looks like this:

var wallabyWebpack = require('wallaby-webpack');

var wallabyPostprocessor = wallabyWebpack({});

module.exports = function (wallaby) {
    return {
        files: [
            {pattern: 'node_modules/babel-polyfill/browser.js', instrument: false},
            {pattern: 'src/**/*.ts', load: false},
            {pattern: 'test/unit/setup.ts', load: false}
        ],
        tests: [
            {pattern: 'test/unit/**/*.spec.ts', load: false}
        ],

        postprocessor: wallabyPostprocessor,

        bootstrap: function () {
            window.__moduleBundler.loadTests();
        }
    };
};

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Scott
Scott
7 years ago

Awesome! Thanks Dwayne as I was looking for something like this.

0
brian b
brian b
7 years ago

Totally unrelated, well almost, question. Since you are writing your app with TypeScript will your book have TS examples? Thanks.

0
zedL
zedL
6 years ago

I use the aurelia-cli 1.0.1 and created a project with following settings:
– vs code
– typescript
– sass
– karma + jasmin
I cant get wallaby to work. Can you make an example for this setup?

0

Primary Sidebar

Popular

  • The Quad Cortex Desktop Editor is Finally Announced
  • Thoughts on the Flipper Zero
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • Smoke Detector Randomly Goes Off Early Hours of The Morning

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz