如何使用打字稿的webpack?

时间:2017-07-19 19:45:19

标签: typescript webpack

我使用了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' >

2 个答案:

答案 0 :(得分:1)

在获得基本的TypeScript环境设置几个月的问题之后,我终于在昨天工作了,主要是通过复制这个启动项目。

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

我不愿意使用Webpack,因为它是一个很重要的依赖项,安装了很多其他 npm 包,但复制启动项目非常简单,之后一切运行良好。

答案 1 :(得分:0)

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

WebPack是另一种模块加载器