《TypeScript图形渲染实战：2D架构设计与实现》 —1.4.2 编写Canvas2D类导出给main.ts调用

1.4.2  编写Canvas2D类导出给main.ts调用

　　在根目录下创建一个名为canvas2d的文件夹，在该文件夹中建立Canvas2D.ts文件，使用export关键词导出Canvas2D类。具体代码如下：

export class Canvas2D {

   // 源码同Canvas2DUtil类

}

　　在main.ts中使用import关键词导入Canvas2D类：

import { Canvas2D } from "./canvas/Canvas2D"

let canvas2d : Canvas2D = new Canvas2D ( canvas ) ;

canvas2d . drawText ( " Hello World From Module ! " ) ;

　　当使用Open In Browser 插件运行index.html后，会发现文字并没有绘制出来，通过浏览器控制台得到的错误提示是“Uncaught SyntaxError：Unexpected token {”。这是因为export / import属于ES 2015标准的内容，浏览器加载ES 2015模块化代码也是使用<script>标签，但是要加入type = "module" 属性。

　　在<script>标签中加入type = "module"属性运行后，继续得到错误提示“Access to Script at 'file:///XXX/HelloWorld/main.js' from origin null' has been blocked by CORS policy : Invalid response. Origin 'null' is therefore not allowed access. ”，这个很明显是跨域问题。

　　从HTTP服务器加载文件就能解决这个问题，可以使用Tomcat和Apache等开源HTTP服务器，但是既然已经安装了Node.js，那么使用NPM包管理器安装本地服务器才是最佳解决方案。