如何使用Webpack与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);

当我编译我的项目时，它会创建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

当我在 Chrome 中检查页面时，我得到：

Uncaught ReferenceError: exports is not defined

MyScript.js第2行

这个答案说我可能需要webpack。
gulp babel, exports is not defined

我该如何加载webpack？就像<script type='javascript' src='webpack' >这样吗？

- patrick

---

Webpack是一个构建工具，将您的JavaScript代码编译为浏览器可用的（打包的）代码。浏览器不知道如何处理导入语句（import statements），也不应该知道。导入/导出仅用于组织源代码。您不需要webpack，只需将其作为外部工具运行即可。建议阅读：http://blog.andrewray.me/webpack-when-to-use-and-why/ - Andy Ray

Answer 1

数月来我一直在苦恼如何搭建 TypeScript 环境，但终于昨天通过复制这个入门项目，使环境跑起来了。

这是该项目的链接：https://github.com/krasimir/webpack-library-starter。

一开始，我对使用 Webpack 感到犹豫，因为它是一个庞大的依赖库，需要安装许多其他 npm 包。但在复制入门项目后，一切都变得十分容易，并且之后所有的操作都很顺利。请注意保留 HTML 标签。

- Sami Badawi

Answer 2

最终我使用了systemjs作为我的模块加载器，这需要正确的tson.config以及在system.configjs.js文件中正确的映射。

WebPack是另一种可选的模块加载器。

- patrick