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的文件中。
目前还没有浏览器实现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';
在加载由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 = {}