如何将 webpack 与打字稿一起使用？答案

【问题标题】：How to use webpack with typescript?如何将 webpack 与打字稿一起使用？
【发布时间】：2017-12-25 06:24:27
【问题描述】：

我正在使用来自 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' >

【问题讨论】：

Webpack 是一个构建工具，可将您的 Javascript 代码编译为浏览器就绪（网络打包）代码。浏览器不（也不应该）知道如何处理 import 语句。导入/导出仅用于组织您的源代码。你不需要 webpack，你可以在你的代码上运行它作为一个外部工具。推荐阅读：blog.andrewray.me/webpack-when-to-use-and-why

标签： typescript webpack

【解决方案1】：

在获得基本的 TypeScript 环境设置数月后，我终于在昨天完成了它，主要是通过复制这个启动项目。

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

我不愿意使用 Webpack，因为它是一个严重的依赖项，它安装了许多其他 npm 包，但是复制启动项目非常容易，之后一切正常。

【讨论】：

【解决方案2】：

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

WebPack 是一个替代模块加载器

【讨论】：