只使用typescript(没有webpack,没有bable),我可以获得在浏览器中运行的多文件解决方案

问题描述 投票:8回答:2

tsconfig.json需要什么才能在Chrome中运行?所以我只需运行tsc然后可以在浏览器中查看该文件,并在控制台中显示相应的结果?

index.html包含:

<!DOCTYPE html>
<html>
    <head><title>TypeScript app</title></head>
    <body>
        <script src="dist/app.js"></script>
    </body>
</html>

index.ts包含

import { alpha } from "alpha";
import { beta } from "beta";
console.log(alpha + " " + beta);

alpha包含

export const alpha = 'alpha';

beta包含

export const beta = 'beta';

入口点是index.ts,我希望它们都捆绑在一个名为app.js的文件中。

javascript typescript tsconfig
2个回答
9
投票

目前还没有浏览器实现ES6及其模块系统。但是,如果你想特别避免使用Webpack和Babel,那么有些选项的配置要求较少,但功能可能不那么强大。 TypeScript编译器本身可以处理捆绑和转换到ES5(现代浏览器支持),只留下模块系统由库覆盖。这是使用RequireJS的一个这样的解决方案:

tsconfig.json

{
    "compilerOptions": {
        "module": "amd",
        "target": "es5",
        "outFile": "dist/app.js"
    },
    "include": [
        "src/**/*"
    ]
}

的index.html

<!DOCTYPE html>
<html>
    <head><title>TypeScript app</title></head>
    <body>
        <script data-main="dist/app" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>
    </body>
</html>

SRC / app.ts

// normally you would use a .d.ts file for RequireJS instead of declare
declare var require: (deps: string[]) => void;

require(['index']);

SRC / index.ts

import { alpha } from "./alpha";
import { beta } from "./beta";
console.log(alpha + " " + beta);

SRC / alpha.ts

export const alpha = 'alpha';

SRC / beta.ts

export const beta = 'beta';

1
投票

在加载由TS生成的bundle之前添加此片段,您需要在TS config中指定TS以使用AMD加载器。

window.define = function(name, required, moduleFn) {
  var require = function() { throw new Error("AMD require not supported!")}
  var exports = window.define.modules[name] = {}
  var resolved = [require, exports]
  for (var i = 2; i < required.length; i++) {
    var m = window.define.modules[required[i]]
    if (!m) throw new Error("AMD module `" + required[i] + "` not found!")
    resolved.push(m)
  }
  moduleFn.apply(null, resolved)
}
window.define.modules = {}

Example


推荐问答