CODEWITHSUNDEEP
typescriptwebpack
patrick
patrick

Reputation: 16949

How to use webpack with typescript?

I'm using the example from cycle.js

MyScript.ts

import { run } from '@cycle/run';
import {makeDOMDriver, div, button} from '@cycle/dom';
import _ from 'lodash';
import xs from 'xstream';


function main (sources) {

  console.log('Hello World');

  const add$ = sources.DOM
    .select('.add')
    .events('click')
    .map(ev => 1);

  const count$ = add$.fold((total, change) => total + change, 0);

  return {
    DOM: count$.map(count =>
      div('.counter', [
        'Count: ' + count,
        button('.add', 'Add')
      ])
    )
  };
}

const drivers = {
  DOM: makeDOMDriver('.app')
}


run(main, drivers);

When I compile my project, it creates MyScripts.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var run_1 = require("@cycle/run");
var dom_1 = require("@cycle/dom");

function main(sources) {
    console.log('Hello World');
    var add$ = sources.DOM
        .select('.add')
        .events('click')
        .map(function (ev) { return 1; });
    var count$ = add$.fold(function (total, change) { return total + change; }, 0);
    return {
        DOM: count$.map(function (count) {
            return dom_1.div('.counter', [
                'Count: ' + count,
                dom_1.button('.add', 'Add')
            ]);
        })
    };
}
var drivers = {
    DOM: dom_1.makeDOMDriver('.app')
};
run_1.run(main, drivers);
//# sourceMappingURL=MyScript.js.map

When I inspect the page in chrome I get 

Uncaught ReferenceError: exports is not defined

MyScript.js line 2

This answer says I probably need webpack.
gulp babel, exports is not defined

How do I load webpack? Is it like <script type='javascript' src='webpack' >

Upvotes: 4

Views: 259

Answers (2)

patrick
patrick

Reputation: 16949

I ended up using systemjs as my module loader which requires the correct tson.config as well as the correct mappings in the system.configjs.js file

WebPack is an alternative module loader

Upvotes: 0

Sami Badawi
Sami Badawi

Reputation: 1032

After months of problem with getting a basic TypeScript environment setup I finally got it working yesterday, mainly by copying this starter project.

https://github.com/krasimir/webpack-library-starter

I was reluctant to use Webpack since it is a heavy dependency that install a lot of other npm packages, but replicating the starter project was pretty easy and after that everything worked pretty well.

Upvotes: 2

Related Questions