仅使用打字稿(没有 webpack 和 bable)，我可以获得在浏览器中运行的多文件解决方案

tsconfig.json需要什么才能在Chrome中完成这项工作？这样我只需要运行 tsc，然后就可以在浏览器中查看文件，并在控制台中显示适当的结果？

索引.html包含：

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

索引.ts 包含

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

阿尔法包含

export const alpha = 'alpha';

测试版包含

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/**/*"
    ]
}

索引.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 生成的捆绑包之前添加此代码段，您需要指定 TS 才能在 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 = {}

例

相关内容

最新更新

热门标签：