上节我们学到命名空间，其实我们的代码也可以使用import进引入的
修改component.ts文件
现在去掉components.ts里的namespace命名空间代码，写成 ES6 的 export 导出模式。代码如下：
export class Header {
constructor(){
const cdiv = document.createElement("div")
cdiv.innerText ="This is Header"
document.body.appendChild(cdiv)
}
}
export class Content {
constructor(){
const cdiv = document.createElement("div")
cdiv.innerText ="This is Content"
document.body.appendChild(cdiv)
}
}
export class Footer {
constructor(){
const cdiv = document.createElement("div")
cdiv.innerText ="This is Footer"
document.body.appendChild(cdiv)
}
}
这三个类就都已经用export导出了，也就是说可以实现用import进行引入了。
修改page.ts文件
在page.ts文件，去掉namespace命名空间对应的代码，然后使用 import 语法进行导入Header、Content和Footer,代码如下：
import {
Header,Content,Footer } from "./Componets"
export class Page {
constructor(){
new Header()
new Content()
new Footer()
}
}
现在可以使用tsc进行编译。然后可以看到编译好的代码都是define开头的(这是 amd 规范的代码，不能直接在浏览器中运行，可以在 Node 中直接运行)，这种代码在浏览器中是没办法被直接运行的，需要其他库(require.js)的支持。
引入require.js
使用了一个现成的 CDN 的require.js,地址可以直接复制，然后用<script>标签进行引入
Require.js 的 CDN 地址： https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js
复制好URL 地址后，使用<script>标签引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
这时候就可以解析define这样的语法了。然后把page.ts中加入default关键字，如果不加是没办法直接引用到的。
import {
Header,Content,Footer } from "./Componets"
export default class Page {
constructor(){
new Header()
new Content()
new Footer()
}
}
这时候再用tsc进行编译一下，你会发现还是又问题。因为使用export default这种形式的语法，需要在html里用require来进行引入。
requir方法引入
现在可以直接在代码中使用require了，具体代码如下
<script>
require(["page"], function (page) {
new page.default();
});
</script>
这样配置完成之后就页面就可以正常的显示内容了，但是配置起来个人觉得相当的麻烦
如果使用webpack或Parcel这些打包工具来处理那就简单多了