createjs技术博客

最近在使用vue+vite+pinia+ts+antd的模式写createjs，本地环境调试的时候基本没有出什么问题，我很开心，觉得以后都可以用新的环境写createjs，结果就在昨天打包测试的时候出问题了。vue开始无法识别a-model的标签了，然后很多css也不见了。一开始我还以为是同事改出的问题，结果最后同事帮我定位了，是我的createjs的问题……（装B失败了）。最后在我今天的努力下，解决了这个问题，废话不多说直接上教程。

先修改tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "isolatedModules": false,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts","src/**/*.js", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

看代码这么多，其实影响到createjs的就只有allowjs，noImplicitAny，include。

然后把vite更新到最新的版本，本人一开始的版本是2.9.1，会出问题，更新后是4.3.9，bug消失。

（其实问题不出在js和ts的混合上，本人测试，单纯导入js文件是不会报错的，但是引入createjs后，在router里使用a-model就会报错，具体原因不知，在vite更新版本后，bug消失，所以判断为vite的bug，朋友的vuex不会出问题也佐证了这点）

最后上vue代码：

<template>
<div class="page">
  <canvas id="testCanvas" width="1000" height="600"></canvas>
</div>
</template>

<script lang="ts" setup>
import {createjs} from "@/utils/createjs/createjs";
import {onMounted} from "vue";
const init = () =>{
  const canvas = document.getElementById("testCanvas");
  // const stage = new createjs.Stage(canvas);
  const stage = new createjs.StageGL(canvas);
  stage.setClearColor('#91DFFF')
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
  createjs.Ticker.addEventListener("tick",stage);
  let shape = new createjs.Shape();
  shape.graphics.beginFill('#ff0000').drawRect(0,0,100,100).endFill();
  shape.cache(0,0,100,100);
  stage.addChild(shape);
  const clickHandler = (event) =>{
    console.log("click");//build环境console无效，需要自己重写console，博客里有
  }
  shape.on('click',clickHandler,this)
}
onMounted(()=>{
  init();
})
</script>

<style scoped>

</style>

可以看到webGL也可以用，不过注意一点，tsconfig.json改完后不管是什么环境都需要清缓存或者强刷，不然不会起效。