├── .gitignore ├── src ├── CssPlugin.js ├── RelativePlugin.js ├── RotationPlugin.js ├── MotionGuidePlugin.js ├── SamplePlugin.js ├── easel.js ├── sound.js ├── preload.js ├── tween.js ├── ColorPlugin.js ├── create.js └── plugins │ ├── RelativePlugin.js │ ├── RotationPlugin.js │ ├── ColorPlugin.js │ ├── SamplePlugin.js │ ├── CSSPlugin.js │ └── MotionGuidePlugin.js ├── package.json ├── webpack.config.js ├── lib ├── RelativePlugin.js ├── SamplePlugin.js ├── RotationPlugin.js ├── CssPlugin.js ├── ColorPlugin.js ├── MotionGuidePlugin.js ├── tween.js └── sound.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | *.log 4 | .sw* 5 | .idea 6 | .idea/* 7 | .vscode 8 | !.gitignore 9 | !.editorconfig 10 | -------------------------------------------------------------------------------- /src/CssPlugin.js: -------------------------------------------------------------------------------- 1 | require( 2 | 'imports-loader?this=>window!' + 3 | './plugins/CssPlugin' 4 | ); 5 | 6 | module.exports = require( 7 | 'imports-loader?this=>window!' + 8 | 'exports-loader?window.createjs!' 9 | ); 10 | -------------------------------------------------------------------------------- /src/RelativePlugin.js: -------------------------------------------------------------------------------- 1 | require( 2 | 'imports-loader?this=>window!' + 3 | './plugins/RelativePlugin' 4 | ); 5 | 6 | module.exports = require( 7 | 'imports-loader?this=>window!' + 8 | 'exports-loader?window.createjs!' 9 | ); 10 | -------------------------------------------------------------------------------- /src/RotationPlugin.js: -------------------------------------------------------------------------------- 1 | require( 2 | 'imports-loader?this=>window!' + 3 | './plugins/RotationPlugin' 4 | ); 5 | 6 | module.exports = require( 7 | 'imports-loader?this=>window!' + 8 | 'exports-loader?window.createjs!' 9 | ); 10 | -------------------------------------------------------------------------------- /src/MotionGuidePlugin.js: -------------------------------------------------------------------------------- 1 | require( 2 | 'imports-loader?this=>window!' + 3 | './plugins/MotionGuidePlugin' 4 | ); 5 | 6 | module.exports = require( 7 | 'imports-loader?this=>window!' + 8 | 'exports-loader?window.createjs!' 9 | ); 10 | -------------------------------------------------------------------------------- /src/SamplePlugin.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: Created by raoenhui 3 | * @Date: 2020-06-30 17:27:51 4 | */ 5 | require( 6 | 'imports-loader?this=>window!' + 7 | './plugins/SamplePlugin' 8 | ); 9 | 10 | module.exports = require( 11 | 'imports-loader?this=>window!' + 12 | 'exports-loader?window.createjs!' 13 | ); -------------------------------------------------------------------------------- /src/easel.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by 侑夕 on 2018-06-30. 3 | * 单独导出 easeljs 4 | */ 5 | 6 | require( 7 | 'imports-loader?this=>window!' + 8 | '../node_modules/easeljs/lib/easeljs' 9 | ); 10 | 11 | module.exports = require( 12 | 'imports-loader?this=>window!' + 13 | 'exports-loader?window.createjs!' 14 | ); 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/sound.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by 侑夕 on 2018-06-30. 3 | * 单独导出 soundjs 4 | */ 5 | 6 | require( 7 | 'imports-loader?this=>window!' + 8 | '../node_modules/soundjs/lib/soundjs' 9 | ); 10 | 11 | module.exports = require( 12 | 'imports-loader?this=>window!' + 13 | 'exports-loader?window.createjs!' 14 | ); 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/preload.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by 侑夕 on 2018-06-30. 3 | * 单独导出 preloadjs 4 | */ 5 | 6 | require( 7 | 'imports-loader?this=>window!' + 8 | '../node_modules/preloadjs/lib/preloadjs' 9 | ); 10 | 11 | module.exports = require( 12 | 'imports-loader?this=>window!' + 13 | 'exports-loader?window.createjs!' 14 | ); 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/tween.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by 侑夕 on 2018-06-30. 3 | * 单独导出 tween.js 4 | */ 5 | 6 | require( 7 | 'imports-loader?this=>window!' + 8 | '../node_modules/tweenjs/lib/tweenjs' 9 | ); 10 | 11 | // module.exports = window.createjs; 12 | module.exports = require( 13 | 'imports-loader?this=>window!' + 14 | 'exports-loader?window.createjs!' 15 | ); 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/ColorPlugin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @Author: Created by raoenhui 3 | * @Date: 2020-06-30 17:38:26 4 | * @Description: webpack中this=>window相当于(function () { ... }).call(window);https://www.webpackjs.com/loaders/imports-loader/#root; 5 | * @tutorial: https://www.createjs.com/docs/tweenjs/classes/ColorPlugin.html 6 | */ 7 | require( 8 | 'imports-loader?this=>window!' + 9 | './plugins/ColorPlugin' 10 | ); 11 | 12 | module.exports = require( 13 | 'imports-loader?this=>window!' + 14 | 'exports-loader?window.createjs!' 15 | ); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "createjs-npm", 3 | "version": "0.2.0", 4 | "description": "createjs 的 cmd 标准版本，可以像 npm 包一样引入使用，同时也支持单个模块使用", 5 | "main": "lib/create.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "author": { 10 | "name": "Tw93", 11 | "email": "tw93@qq.com" 12 | }, 13 | "license": "MIT", 14 | "devDependencies": { 15 | "easeljs": "^1.0.2", 16 | "exports-loader": "^0.7.0", 17 | "imports-loader": "^0.8.0", 18 | "preloadjs": "^1.0.1", 19 | "soundjs": "^1.0.1", 20 | "tweenjs": "^1.0.2", 21 | "webpack": "^3.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/create.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by 侑夕 on 2018-05-17. 3 | * 将 createjs 弄成 cmd 标准模式，解决原有 createjs 不能通过 npm 使用问题 4 | */ 5 | 6 | // 将模块中的this还原为window 7 | require( 8 | 'imports-loader?this=>window!' + 9 | '../node_modules/easeljs/lib/easeljs' 10 | ); 11 | require( 12 | 'imports-loader?this=>window!' + 13 | '../node_modules/tweenjs/lib/tweenjs' 14 | ); 15 | require( 16 | 'imports-loader?this=>window!' + 17 | '../node_modules/preloadjs/lib/preloadjs' 18 | ); 19 | 20 | require( 21 | 'imports-loader?this=>window!' + 22 | '../node_modules/soundjs/lib/soundjs' 23 | ); 24 | 25 | // module.exports = window.createjs; 26 | module.exports = require( 27 | 'imports-loader?this=>window!' + 28 | 'exports-loader?window.createjs!' 29 | ); 30 | 31 | 32 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: Tw93 on 2018-07-29 3 | * @Modify: raoenhui 4 | * @Date: 2020-06-30 16:26:08 5 | * @Description: 将createjs 弄成 cmd 标准模式，解决原有 createjs 不能通过 npm 使用问题 6 | */ 7 | 8 | const path = require('path'); 9 | const webpack = require('webpack'); 10 | const fs = require('fs'); 11 | var files = fs.readdirSync('src'); 12 | var entry = {}; 13 | 14 | files.forEach(function (val) { 15 | if (val === 'plugins') return; 16 | let tKey = val.split('.')[0]; 17 | entry[tKey] = `./src/${val}`; 18 | }) 19 | module.exports = { 20 | entry, 21 | output: { 22 | path: path.resolve(__dirname, "lib/"), 23 | filename: "[name].js", 24 | libraryTarget: 'umd' 25 | }, 26 | plugins: [ 27 | new webpack.optimize.UglifyJsPlugin() 28 | ] 29 | }; 30 | -------------------------------------------------------------------------------- /lib/RelativePlugin.js: -------------------------------------------------------------------------------- 1 | !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var i in n)("object"==typeof exports?exports:e)[i]=n[i]}}("undefined"!=typeof self?self:this,function(){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=14)}({0:function(e,t){(function(){e.exports=window.createjs}).call(window)},14:function(e,t,n){n(15),e.exports=n(0)},15:function(e,t){(function(){this.createjs=this.createjs||{},function(){"use strict";function e(){throw"RelativePlugin plugin cannot be instantiated."}var t=e;t.ID="Relative",t.install=function(){createjs.Tween._installPlugin(e)},t.init=function(e,n,i){e.pluginData.Relative_disabled||e._addPlugin(t)},t.step=function(e,t,n){for(var i in n){var o=n[i];if("string"==typeof o){var r=t.prev.props[i],u=o[0];"+"!==u&&"-"!==u||isNaN(o=+o+r)||(t.props[i]=o)}}},t.change=function(e,t,n,i,o,r){},createjs.RelativePlugin=t}()}).call(window)}})}); -------------------------------------------------------------------------------- /lib/SamplePlugin.js: -------------------------------------------------------------------------------- 1 | !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}("undefined"!=typeof self?self:this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=18)}({0:function(e,t){(function(){e.exports=window.createjs}).call(window)},18:function(e,t,n){n(19),e.exports=n(0)},19:function(e,t){(function(){this.createjs=this.createjs||{},function(){"use strict";function e(){throw"SamplePlugin cannot be instantiated."}var t=e;t.priority=0,t.ID="Sample",t.install=function(){createjs.Tween._installPlugin(e)},t.init=function(t,n,o){if(console.log("init: ",n,o),!t.pluginData.Sample_disabled){if("y"===n)return createjs.Tween.IGNORE;"x"===n&&(t._addPlugin(e),t.pluginData.Sample_y=t.target.y,t.target[n])}},t.step=function(e,t,n){if(console.log("step: ",t,n),void 0!==n.x){t.props.x,t.prev.props.x}},t.change=function(e,t,n,o,r,i){if("y"===n)return createjs.Tween.IGNORE;if("x"===n){e.target.y=50*Math.sin(o/160*Math.PI)+e.pluginData.Sample_y;t.props[n],t.prev.props[n],t.props,t.prev.props}},createjs.SamplePlugin=t}()}).call(window)}})}); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # createjs-npm 2 | 3 | > createjs 的 cmd 标准版本，可以像 npm 包一样引入使用，同时也支持单个模块使用 4 | 5 | ## 安装 6 | 7 | ```bash 8 | tnpm install createjs-npm -S 9 | ``` 10 | 11 | ## 使用 12 | 13 | ```js 14 | // 引入后和官方 createjs 使用无任何区别 15 | // 引入全部模块 16 | import createjs from 'createjs-npm'; 17 | 18 | // 只引入 easeljs 19 | import createjs from 'createjs-npm/lib/easel'; 20 | 21 | // 只引入 preload 22 | import createjs from 'createjs-npm/lib/preload'; 23 | 24 | // 只引入 tween 25 | import createjs from 'createjs-npm/lib/tween'; 26 | 27 | // 只引入 sound 28 | import createjs from 'createjs-npm/lib/sound'; 29 | 30 | // 只引入某插件，如ColorPlugin 31 | import 'createjs-npm/lib/ColorPlugin'; 32 | ``` 33 | 34 | ## 包含 35 | 36 | ```json 37 | { 38 | "easeljs": "^1.0.2", // 用于 Sprites 、动画、向量和位图的绘制 39 | "preloadjs": "^1.0.1", // 网站资源预加载 40 | "soundjs": "^1.0.1", // 音频播放引擎 41 | "tweenjs": "^1.0.2", // 用于做动画效果 42 | "ColorPlugin": "^1.0.2", // 用于颜色渐变插件 43 | "CSSPlugin": "^1.0.2", // 插件 44 | "MotionGuidePlugin": "^1.0.2", // 插件 45 | "RelativePlugin": "^1.0.2", // 插件 46 | "RotationPlugin": "^1.0.2", // 插件 47 | "SamplePlugin": "^1.0.2" // 插件 48 | } 49 | ``` 50 | 51 | ## 为什么要弄一个 npm 版本的 createjs ？ 52 | 53 | - 目前官方版本的 [createjs](https://createjs.com/) **不支持通过 npm 方式的使用**，导致在 ES6 开发中，需要在 html 中手动引入一个 `