.
前提：需要先安装 Visual Studio Code 和 nodejs
nodejs 官网 https://nodejs.org/zh-cn 去官网下载安装包安装既可
.
在电脑桌面上，创建一个文件夹，作为项目文件夹。
打开 Visual Studio Code，把创建的文件夹拖进 Visual Studio Code。
.
Visual Studio Code 里面通过菜单栏，选择终端，新建终端。
安装 TypeScript 通过 npm 安装
.
把下面的 npm 命令 在终端运行，这是安装 ts 的命令
npm install -g typescript
在终端跑 npm 命令 tsc -v 如果显示版本号说明安装成功
.
安装 ts - node
在终端跑 npm install -g ts-node
.
继续跑 ts-node -v
如果出现版本号说明安装成功
.
在项目根目录创建两个文件夹，分别是 dist 和 src
.
在终端跑 tsc --init 生成 tsconfig.json 文件
在终端跑 npm init -y 生成 package.json 文件
.
安装 createjs ts 通过 npm 安装（createjs - ts 两个仓库，二选一）
npm install createjs-ts（createjs交流群群主的仓库）
npm install createjs-ts-ascainiao （ascainiao的仓库，更新快，更丰富的 api 说明 个人推荐）
.
安装 webpack（打包工具）
在终端跑 npm install --save-dev typescript ts-loader webpack webpack-cli
.
在项目根目录创建一个 webpack.config.js 文件，用于配置 Webpack 打包过程
.
tsconfig.json 内容如下（我配置的，你们也可以自己找教程配置哈）
{
"compilerOptions": {
"target": "es5", // 指定编译目标的ECMAScript版本
"module": "commonjs", // 指定生成的模块系统
"strict": true, // 启用所有严格类型检查选项
"esModuleInterop": true, // 启用ES模块互操作
"skipLibCheck": true, // 跳过对库文件的类型检查
"outDir": "./dist", // 指定输出目录
"rootDir": "./src", // 指定根目录，用于确定TypeScript输入文件的相对位置
"removeComments": true, // 删除注释
"noImplicitAny": false, // 禁用隐式any类型
"sourceMap": true, // 生成相应的.map文件
"experimentalDecorators": true, // 允许使用实验性的装饰器特性
"emitDecoratorMetadata": true, // 为装饰器生成元数据
"resolveJsonModule": true, // 关键配置：允许导入 JSON
"allowJs": true, // 允许编译JavaScript文件（有用的话）
"moduleResolution": "node", // 指定模块解析策略
"allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块中默认导入
},
"include": [
"src/**/*" // 包含src目录下的所有文件
],
"exclude": [
"node_modules", // 排除node_modules目录
"**/*.spec.ts" // 排除所有的测试文件
]
}
.
tsconfig.json 注意两项：
"outDir": "./dist", // 打包出来的文件存放目录
"rootDir": "./src", // 你的 .ts 代码目录
我配置的，你们也可以自己找教程配置哈
.
webpack.config.js 内容如下（我配置的，你们也可以自己找教程配置哈）
const path = require('path');
module.exports = {
mode: 'development',//模式
entry: './src/index.ts',//项目入口文件 文档类
output: {
filename: 'index.js',//打包后的文件名
path: path.resolve(__dirname, 'dist'),//打包出来的文件存放目录
},
/*
externals: {
'createjs-ts': 'window.createjs'//不把cjs打包进去cjs指向window.createjs（要在网页引入cjs主文件）
},
*/
module: {
rules: [
{
test: /\.tsx?$/,//正则表达式匹配.ts或.tsx文件
use: 'ts-loader',//使用ts-loader处理TypeScript文件
exclude: /node_modules/,//排除node_modules目录
},
{
test: /\.json$/, // 匹配JSON文件
type: 'json', // 使用json类型，Webpack将直接处理JSON文件并作为模块导入
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.json'],//自动解析的文件扩展名
},
devServer: {
static: './dist',//告诉 dev server 从哪个目录提供内容
open: true,//自动打开浏览器
port: 8080,//设置服务器监听的端口
hot: true,//启用模块热替换
}
};
.
webpack.config.js 注意 devServer
devServer 是 webpack 提供的一个服务器
使用该服务器，每次改完 .ts 代码不需要重新打包也可以看实时效果。
调试用的
.
安装：Webpack Dev Server
Webpack Dev Server 是一个实时服务器，使用Webpack Dev Server，
每次改完 .ts 代码 不需要重新打包 也可以看 实时效果
.
在终端跑
npm install webpack-dev-server --save-dev
安装实时服务器
.
在 src 目录下创建一个 index.ts 文件
.
index.ts 内容如下
import createjs from "createjs-ts-ascainiao";
const canvas: HTMLCanvasElement = document.getElementById("canvas") as HTMLCanvasElement
const stage: createjs.StageGL = new createjs.StageGL(canvas)
.
在 package.json 中添加一个脚本来运行Webpack：测试是否可以用 webpack打包
打包，发布，生成是一个意思，是 .ts 生成 .js 的意思。
.
package.json 里面的
"scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
替换成：
"scripts": {
"build": "webpack"
}
保存
.
终端，运行生成任务，选择 npm 生成
如果在 dist 目录下生了 index.js 文件说明 webpack打包成功
.
在 dist 目录下 创建 index.html 来引用生成的 .js 代码
.
index.html 内容如下
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>an5</title>
</head>
<body style="margin:0px;">
<canvas id="canvas" width="960" height="640"
style="position: absolute; display: block; background-color:rgba(153, 153, 153, 1.00);">
</canvas>
</body>
<script src="./index.js" type="module"></script>
</html>
.
index.ts 代码如下
import createjs from "createjs-ts-ascainiao";
const canvas: HTMLCanvasElement = document.getElementById("canvas") as HTMLCanvasElement
const stage: createjs.StageGL = new createjs.StageGL(canvas)
console.log(stage);
.
.
注意 webpack.config.js 里面的 externals
externals: { 'createjs-ts': 'window.createjs'
//不把cjs主文件打包进去
cjs指向window.createjs（要在网页引入cjs主文件） },
.
默认是把 cjs 主文件打包进生成的 .js 里面的，
不打包cjs主文件进.js的话 需要在 index.html 引入 cjs 主文件
.
你也可以删除， externals:的内容这样就打包进去.js里面无需在index.html引入cjs主文件，
.
启动服务器：启动服务器看实时代码效果
在终端跑 npx webpack serve 来启动实时服务器
.
启动实时服务器后，每次修改 .ts 文件就可以看实时效果
调试就用实时服务器，打包那是你项目完成了要上传服务器才打包。
.
.
.
可以看到 index.ts 里面 我输出了 舞台 控制台可以看到
.
.
在后面加个 77 保存后 浏览器看到了实时效果
到此环境配置完成，可以在 index.ts 里面写你要的效果了。
.
上面说的都是一些常见的配置，这里就是简单演示创建 createjs ts 项目的方法（实际上是给新手参考的）
不喜勿喷 支雅大神 2025.04.15 星期二
.
createjs 发扬光大
. |
微信扫一扫
