新手如何创建CreateJS的TS版项目？
前提：
需要先安装 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 安装 npm install createjs-ts
安装 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": "https://www.bilibili.com/opus/dist", // 指定输出目录
"rootDir": "https://www.bilibili.com/opus/src", // 指定根目录，用于确定TypeScript输入文件的相对位置
"removeComments": true, // 删除注释
"noImplicitAny": false, // 禁用隐式any类型
"sourceMap": true, // 生成相应的.map文件
"experimentalDecorators": true, // 允许使用实验性的装饰器特性
"emitDecoratorMetadata": true // 为装饰器生成元数据
},
"include": [
"src*" // 包含src目录下的所有文件
],
"exclude": [
"node_modules", // 排除node_modules目录
"**/*.spec.ts" // 排除所有的测试文件
]
}
tsconfig.json 注意两项：
"outDir": "https://www.bilibili.com/opus/dist", // 打包出来的文件存放目录
"rootDir": "https://www.bilibili.com/opus/src", // 你的 .ts 代码目录
我配置的，你们也可以自己找教程配置哈
webpack.config.js 内容如下（我配置的，你们也可以自己找教程配置哈）
const path = require('path');
module.exports = {
mode: 'development',//模式
entry: 'https://www.bilibili.com/opus/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目录
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],//自动解析的文件扩展名
},
devServer: {
static: 'https://www.bilibili.com/opus/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";
var cc:createjs.Container=new createjs.Container();
在 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>Document</title> <script src=https://www.bilibili.com/opus/"https://www.bilibili.com/opus/index.js" type="module"></script></head>
<style> #hb { position: absolute; display: block; background-color: bisque; }</style>
<body> <canvas id="hb" width="960" height="640"></canvas></body>
</html>
index.ts 代码如下
import createjs from "createjs-ts";
let canvas: HTMLCanvasElementlet stage: createjs.Stage
window.addEventListener("load", initFn);function initFn() {
canvas = document.getElementById("hb") as HTMLCanvasElement stage = new createjs.Stage(canvas)
console.log(stage)}
注意 webpack.config.js 里面的 externals
externals: { 'createjs-ts': 'window.createjs'//不把cjs打包进去cjs指向window.createjs（要在网页引入cjs主文件） },
默认是把 cjs 主文件打包进生成的 .js 里面的，我这里设置，不把 cjs 主文件打包进去（不打包cjs主文件进.js的话 需要在 index.html 引入 cjs 主文件）
你也可以删除， externals:的内容这样就打包进去.js里面无需在index.html引入cjs主文件，（我刚刚把 externals里面的内容删了，打包cjs进去了所以不需要在index.html引入cjs主文件）
启动服务器：启动服务器看实时代码效果
在终端跑 npx webpack serve 来启动实时服务器
启动实时服务器后，每次修改 .ts 文件就可以看实时效果
调试就用实时服务器，打包那是你项目完成了要上传服务器才打包。
可以看到 index.ts 里面 我输出了 舞台 控制台可以看到
到此环境配置完成，可以在 index.ts 里面写你要的效果了。
上面说的都是必须得配置环境，这里就是简单演示创建 createjs ts 项目的方法（实际上是给新手参考的）
createjs 发扬光大
另外分享一个 createjs 早期版 pdf
createjs HTML5 Games.pdf
链接: https://pan.baidu.com/s/1TJ5FMhtsKHx2hBRfgviadA?pwd=jtf9
提取码: jtf9
另外说一下
新手如何创建画布 Canvas ？
1：通过标签创建
<canvas id="cc" width="960" height="640"></canvas>
2：通过 js 创建
let canvas = document.createElement("canvas");
canvas.width = 960;
canvas.height = 640;
document.body.appendChild(canvas);
两种创建效果是一样的
canvas.id = "cc"; （忘记了，补上）
给画布添加 css 的方法
<canvas id="cc" width="960" height="640" style="position: absolute;display: block;background-color: bisque;"></canvas>
也可以用 id 选择器（效果是一样的）
<style> #cc { position: absolute; display: block; background-color: bisque; z-index: 0; }</style>
position 属性指定了元素的定位类型
有意自己去看api说明：https://www.runoob.com/css/css-positioning.html
display 属性设置一个元素应如何显示
有意自己去看api说明：https://www.runoob.com/css/css-display-visibility.html
background-color 属性定义了元素的背景颜色.
有意自己去看api说明：https://www.runoob.com/css/css-background.html
overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条
有意自己去看api说明：https://www.runoob.com/css/css-overflow.html
z-index属性是一个非常重要的属性，它用于控制元素在页面上的重叠顺序
就是我们 flash 以前的 深度层级遮挡关系的意思
再说一下软件
Adobe Animate（Flash）动画新时代
Adobe Animate 是一款非常专业的动画制作软件，由原 Adobe Flash Professional CC 更名得来。
维持原有Flash开发工具支持外新增 HTML 5 创作工具，为网页开发者提供更适应现有网页应用的音频、图片、视频、动画等创作支持。
Adobe Animate 可以让你为游戏，应用程序和网络设计交互式矢量和位图动画。 让动画片和横幅广告栩栩如生。 快速发布到多个平台，并覆盖台式机，移动设备和电视上的观众。
Adobe Animate 将拥有大量的新功能，特别是在继续支持 Flash SWF、AIR 格式的同时，还会支持 HTML5Canvas、WebGL，并能通过可扩展架构去支持包括 SVG 在内的几乎任何动画格式。
使用尖端的绘图工具为Windows PC设计交互式2D动画，并将其发布到多个平台（包括Flash / Adobe AIR，HTML5 Canvas，WebGL甚至是自定义平台），并通过广播电视或几乎任何台式机或移动设备吸引观众 。
业界领先的动画工具集使您可以创建可在任何屏幕上移动的应用，广告和出色的多媒体内容。 Adobe Animate（Adobe Flash）总是在不断完善，并定期推出新功能。
Adobe Animate 使用功能强大的插图和动画工具为游戏和广告创建基于Web的交互式内容。构建游戏环境，设计启动屏幕和界面，创建交互式播放器精灵，甚至集成音频。
使用 Adobe Animate，您可以直接在应用程序内进行所有资产设计和编码。
Adobe Animate（Adobe Flash）总是在不断完善，并定期推出新功能。
Flash 转 H5 HTML5 动画新时代