How to use webpack with typescript?

Question

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' >

Webpack is a build tool that compiles your Javascript code into browser ready (web packed) code. Browsers don't (and shouldn't) know how to handle import statements. imports/exports are just for organizing your source code. You don't require webpack, you run it over your code as an external tool. Suggested reading: blog.andrewray.me/webpack-when-to-use-and-why — Andy Ray
– Andy Ray, Commented Jul 19, 2017 at 19:51

Sami Badawi · Accepted Answer · 2017-07-19 20:32:13Z

2

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.

answered Jul 19, 2017 at 20:32

Sami Badawi

1,0321 gold badge14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

patrick · Accepted Answer · 2017-10-11 20:40:07Z

0

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

answered Oct 11, 2017 at 20:40

patrick

17.1k29 gold badges109 silver badges177 bronze badges

Collectives™ on Stack Overflow

How to use webpack with typescript?

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related