《TypeScript图形渲染实战：2D架构设计与实现》 —1.4.3 使用lite-server搭建本地服务器

1.4.3  使用lite-server搭建本地服务器

　　引用官方的描述，lite-server是一个轻量级的、基于Node.js运行环境的服务器，目前仅支持Web App。当运行lite-server后，它能够打开浏览器，当HTML、CSS或JavaScript文件变化时，它会识别到并自动刷新浏览器页面, 当路由没有被找到时，它将自动后退页面。lite-server自动刷新的功能对于开发调试来说是非常方便的。

　　lite-server官方推荐NPM本地安装，其流程如下所述。

　　（1）打开VS Code集成终端，输入npm init -f 命令，在项目的根目录下生成package.json文件。

　　（2）继续在集成终端中输入npm install lite-server --save-dev 命令进行本地安装。

　　当完成lite-server安装后，打开项目根目录下的package.json文件，找到scripts项，输入如下命令：

"scripts" : {

       "dev" : "lite-server"

}

　　打开VS Code中的集成终端，输入npm run dev命令就能运行lite-server了。

　　当从服务器（http:// localhost:3000）载入index.html页面时，浏览器控制台会显示：GET http://localhost:3000/canvas2d/Canvas2D404（Not Found）。

　　很明显，服务器没找到Canvas2D文件，这是因为TypeScript导入Canvas2D时不允许使用.ts扩展名，如图1.22所示。

图1.22  导入路径不能使用.ts扩展名

　　通过tsc命令编译（转译）为JS代码后，也没有扩展名，而JavaScript模块化导入需要以.js为扩展名，因此需要手动更改一下main.js文件：

// import { Canvas2D }  from "/ canvas/Canvas2D" 增加.js扩展名

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

　　当保存好修改的内容后，lite-server会自动刷新页面，文字将会正确地显示出来。