Question

当使用Typescript --outFile或使用像brunch这样的构建工具时，我会得到一个包含所有模块的转换和连接的JavaScript文件。

类似的东西：

(function() {
  'use strict';

  var globals = typeof window === 'undefined' ? global : window;
  if (typeof globals.require === 'function') return;

  var modules = {};
  var cache = {};
  var aliases = {};
  var has = ({}).hasOwnProperty;

  var expRe = /^\.\.?(\/|$)/;
  var expand = function(root, name) {
    var results = [], part;
    var parts = (expRe.test(name) ? root + '/' + name : name).split('/');
    for (var i = 0, length = parts.length; i < length; i++) {
      part = parts[i];
      if (part === '..') {
        results.pop();
      } else if (part !== '.' && part !== '') {
        results.push(part);
      }
    }
    return results.join('/');
  };

  var dirname = function(path) {
    return path.split('/').slice(0, -1).join('/');
  };

  var localRequire = function(path) {
    return function expanded(name) {
      var absolute = expand(dirname(path), name);
      return globals.require(absolute, path);
    };
  };

  var initModule = function(name, definition) {
    var module = {id: name, exports: {}};
    cache[name] = module;
    definition(module.exports, localRequire(name), module);
    return module.exports;
  };

  var expandAlias = function(name) {
    return aliases[name] ? expandAlias(aliases[name]) : name;
  };

  var require = function(name, loaderPath) {
    if (loaderPath == null) loaderPath = '/';
    var path = expandAlias(name);

    if (has.call(cache, path)) return cache[path].exports;
    if (has.call(modules, path)) return initModule(path, modules[path]);

    throw new Error('Cannot find module "' + name + '" from ' + '"' + loaderPath + '"');
  };

  require.alias = function(from, to) {
    aliases[to] = from;
  };

  require.reset = function() {
    modules = {};
    cache = {};
    aliases = {};
  };

  var extRe = /\.[^.\/]+$/;
  var indexRe = /\/index(\.[^\/]+)?$/;
  var addExtensions = function(bundle) {
    var alias = bundle;
    while (extRe.test(alias)) {
      alias = alias.replace(extRe, '');
      if (!has.call(aliases, alias) || aliases[alias].replace(extRe, '') === alias + '/index' || bundle === alias + '.js') {
        aliases[alias] = bundle;
      }
    }

    if (indexRe.test(bundle)) {
      var iAlias = bundle.replace(indexRe, '');
      if (!has.call(aliases, iAlias)) {
        aliases[iAlias] = bundle;
      }
    }
  };

  require.register = require.define = function(bundle, fn) {
    if (typeof bundle === 'object') {
      for (var key in bundle) {
        if (has.call(bundle, key)) {
          require.register(key, bundle[key]);
        }
      }
    } else {
      modules[bundle] = fn;
      delete cache[bundle];
      addExtensions(bundle);
    }
  };

  require.list = function() {
    var result = [];
    for (var item in modules) {
      if (has.call(modules, item)) {
        result.push(item);
      }
    }
    return result;
  };

  require.brunch = true;
  require._cache = cache;
  globals.require = require;
})();
require.register("scripts/main.ts", function(exports, require, module) {
System.register(['./ranger'], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var ranger_1;
    return {
        setters:[
            function (ranger_1_1) {
                ranger_1 = ranger_1_1;
            }],
        execute: function() {
            console.log(ranger_1.default.name);
        }
    }
});
//# sourceMappingURL=main.js.map
});

;require.register("scripts/ranger.ts", function(exports, require, module) {
System.register([], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    return {
        setters:[],
        execute: function() {
            exports_1("default",{
                name: 'I am a ranger!'
            });
        }
    }
});
//# sourceMappingURL=ranger.js.map
});

;
//# sourceMappingURL=app.js.map

现在..我应该如何使用它？我已经使用SystemJS编译了所有内容，但我也可以使用commonjs或amd。我尝试使用System.JS并导入一些东西..但这就是我遇到的墙。所有模块都已导入。我只需要选择一个（比如主条目模块）并执行它。我读过有关这些工具的东西（可能？）包括＆＃34;微装载机＆＃34;要做到这一点，但没有找到任何显示它们实际使用情况的例子。

Answer 1

然后使用SystemJS或RequireJS等工具从该文件加载模块。

在index.html文件中，您可以像这样写：

<script src="path/to/libs/requirejs/require.js" data-main="myCompiledJSFile"></script>

请注意myCompiledJSFile是您使用TypeScript发现的完整文件。

将TypeScript编译为一个包..现在是什么？

1 个答案: