1. createjs-npm
createjs 的 cmd 标准版本,可以像 npm 包一样引入使用,同时也支持单个模块使用
createjs-npm
Package: createjs-npm
Last modified: Wed, 27 Apr 2022 21:48:31 GMT
Version: 0.2.0
License: MIT
Downloads: 61

Install

npm install createjs-npm
yarn add createjs-npm

createjs-npm

createjs 的 cmd 标准版本,可以像 npm 包一样引入使用,同时也支持单个模块使用

安装

 tnpm install createjs-npm -S

使用

 // 引入后和官方 createjs 使用无任何区别
// 引入全部模块
import createjs from 'createjs-npm';

// 只引入 easeljs
import createjs from 'createjs-npm/lib/easel';

// 只引入 preload
import createjs from 'createjs-npm/lib/preload';

// 只引入 tween
import createjs from 'createjs-npm/lib/tween';

// 只引入 sound
import createjs from 'createjs-npm/lib/sound';

// 只引入某插件,如ColorPlugin
import 'createjs-npm/lib/ColorPlugin';

包含

 {
  "easeljs": "^1.0.2", // 用于 Sprites 、动画、向量和位图的绘制
  "preloadjs": "^1.0.1", // 网站资源预加载
  "soundjs": "^1.0.1", // 音频播放引擎
  "tweenjs": "^1.0.2", // 用于做动画效果
  "ColorPlugin": "^1.0.2", // 用于颜色渐变插件
  "CSSPlugin": "^1.0.2", // 插件
  "MotionGuidePlugin": "^1.0.2", // 插件
  "RelativePlugin": "^1.0.2", // 插件
  "RotationPlugin": "^1.0.2", // 插件
  "SamplePlugin": "^1.0.2" // 插件
}

为什么要弄一个 npm 版本的 createjs ?

  • 目前官方版本的 createjs 不支持通过 npm 方式的使用,导致在 ES6 开发中,需要在 html 中手动引入一个 <script> 标签才可以正常使用
  • 在目前 H5 开发中,一般通过 npm 方式引入模块,同时也更好的便于用 createjs 封装的上层组件可以当成模块一样引入使用
  • 找了一大圈,内外部没有看到好的解决方案,所以自己弄了一个放到 createjs-npm 下面

原理

  • 利用 imports-loader 进行导入到当前,将this指向 windows
  • 利用 exports-loader 将弄好 createjs 的模块导出到全局

案例

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin