export class Header {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Header";
document.body.appendChild(elem);
}
}
export class Content {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Content";
document.body.appendChild(elem);
}
}
export class Footer {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Footer";
document.body.appendChild(elem);
}
}
import { Header, Content, Footer } from "./components";
export default class Page {
constructor() {
new Header();
new Content();
new Footer();
}
}
編譯好的代碼都是define開頭的(這是 amd 規范的代碼，不能直接在瀏覽器中運行，可以在 Node 中直接運行)，這種代碼在瀏覽器中是沒辦法被直接運行的，需要其他庫(require.js)的支持。
引入現成的 CDN 的 require.js：
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
在 html 里使用：
<body>
<script>
require(["page"], function (page) {
new page.default();
});
</script>
</body>
可以看出這么做非常麻煩，但是我們可以用打包工具來完成這項工作，比如 webpack 和 Parcel 。參考：用 Parcel 打包 TypeScript 代碼
相關文章：
用 Parcel 打包 TypeScript 代碼
參考：
技術胖——TypeScript從入門到精通（24. TypeScript 如何使用 import 語法）