How do I use webpack with typescript?
I am using an example from a .js loop
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 check the page in chrome I get
Uncaught ReferenceError: exports is not defined
MyScript.js line 2
This answer says that I probably need a webpack.
gulp babel, no export defined
How do I download a webpack? What is it like<script type='javascript' src='webpack' >
source to share
After months of trouble getting the basic TypeScript environment set up, I finally got it working yesterday, mainly copying this starter project.
https://github.com/krasimir/webpack-library-starter
I didn't want to use Webpack as it is a heavy dependency that installs many other npm packages , but replicating the starter project was pretty straightforward and everything worked very well after that.
source to share