营销型 网站 品牌,网络服务电话,如何做优秀的视频网站,贵安新区网站建设在Cocos Creator中#xff0c;脚本代码文件分为模块和插件两种方式#xff1a;
模块一般就是项目的脚本#xff0c;包含项目中创建的代码、引擎模块、第三方模块。 插件脚本#xff0c;是指从 Cocos Creator 属性检查器中导入的插件#xff0c;一般是引入第三方引入库文件…
在Cocos Creator中脚本代码文件分为模块和插件两种方式
模块一般就是项目的脚本包含项目中创建的代码、引擎模块、第三方模块。 插件脚本是指从 Cocos Creator 属性检查器中导入的插件一般是引入第三方引入库文件目前 Cocos Creator 只支持 javaScript 脚本插件。Cocos Creator会向插件脚本内容中插入一些代码适配Creator并且会屏蔽全局变量 model 、exports 、define 。 由于篇幅原因CocosCreator 脚本说明及使用分为上、下两篇进行介绍 这篇文章主要介绍脚本模块下一篇结束插件脚本。 一、模块的概念 在目前前端开发中模块化已成为一种不可或缺的开发方式。
JavaScript模块规范为开发者提供了不同的选择以满足不同的项目需求和开发风格每一种都有其独特的特点和适用场景。
在讲解CocosCreator 模块前首先需要普及两个概念CommonJS (CJS) 模块、ECMAScript Modules (ESM) 模块。 1、CommonJS CJS模块 相信熟悉Node 与 Javascript的朋友都知道 早期的Node 与 Javascript 没有模块这个概念。 为了方便对代码开发和管理Node 首先提出了 CommonJS 模块规范。
它采用同步加载模块的方式通过require来引入模块使用module.exports和exports来导出模块。 这种规范适用于服务器端开发在浏览器中使用时可能会遇到性能问题因为同步加载可能会阻塞页面渲染。 例如
// tools.js
module.exports function dosomething(data) {// todo
}// main.js
const dosomething require(./tools.js)CommonJs 是引入对象的一个拷贝可以直接运行在后端环境中。因此 CommonJs 在浏览器环境中是无效的必须要经过编译和打包后才能在浏览器环境中执行。 2、ECMAScript Modules ESM模块 1、ESM是什么 ESM 是官方规定的JavaScript 模块规范实现标准模块系统方案从ES6ES2015开始引入import和exports 语法来导入和导出模块与现代浏览器和Node.js 兼容。 例如
// tools.js
export const dosomething () {// todo
}// main.js
const { dosomething } import(./tools.js)在 script 中可以直接引用 ESM 文件:
script src./main.js typemodule/script设置typemodule 会将加载的文件视为模块文件识别模块的import语句并加载。 2、ESM 模块的特点 自身的静态化特点在编译时加载使得页面加载速度快。 真正意义上做到了按需使用。使用 import 并不会直接执行模块而是生成一个动态的只读引用等到真的需要用到时才会到模块里面去读取。 二、CocosCreator 模块的规范 1、模块格式
Cocos Creator 原生支持并推荐使用 ECMAScript ESM模块。
Cocos Creator 引擎提供的所有功能都以 ESM 模块的形式存在。 例如
import { _decorator, CCInteger, Component, EventMouse, input, Node,Label, Sprite} from cc;
const { ccclass, property,type,integer} _decorator;Cocos Creator 项目资源目录中以 .ts 作为后缀的文件都视为 ESM 模块。
例如
assets/scripts/PlayerControl.ts对于除.ts 外的其它模块格式Cocos Creator 按以下规则来进行鉴别
ESM 格式
以 .mjs 为后缀的文件以 .js 为后缀的文件并且与其最相近的父级 package.json 文件中包含一个顶级的 type 字段其值为 module。 CommonJS 模块格式
以 .cjs 为后缀的文件以 .js 为后缀的文件并且与其最相近的父级 package.json 文件中包含一个顶级的 type 字段其值为 commonjs。不在上述条件下的以 .js 为后缀的文件。 二、CocosCreator 模块说明符和模块解析 在 ESM 模块中通过标准的导入导出语句与目标模块进行交互。
import { PlayerControl } from ./PlayerControl;
export { PlayerControl } from ./PlayerControl;导入导出语句中关键字 from 后的字符串称为 模块说明符。
模块说明符也可作为参数出现在动态导入表达式 import() 中。 模块说明符用于指定目标模块从模块说明符中解析出目标模块 URL 的过程称为 模块解析。 Cocos Creator 支持三种模块说明符 1、相对说明符 像 ./PlayerControl、../PlayerControl 这样以 ./ 和 ../ 开头的说明符。 相对说明符是以当前模块的 URL 为基础来解析目标模块项目路径。 例如对于模块项目路径:
/assets/scripts/utils/PlayerControl 如果有相对说明符 ./a 这个url将解析为同目录下的 项目路径
/assets/scripts/utils/a2、绝对说明符
直接指定了目标模块的 URL。
例如 /assets/scripts/utils/PlayerControl 3、裸说明符 像 PlayerControl、PlayerControl/a 这样既不是 URL 又不是相对说明符的说明符。 Cocos Creator 使用导入映射控制 TypeScript/JavaScript 的导入行为指定对裸说明符的解析。 导入映射使用方法 1、设置导入映射文件的路径 注意设置导入映射文件的路径非常重要 因为导入映射中的所有相对路径都是相对于导入映射文件路径。 通过编辑器顶部菜单栏的 项目 - 项目设置 - 脚本 中的 导入映射 进行设置。 设置完成后导入映射功能开启使用的导入映射将从指定的文件中读取。 2、使用别名映射
假如有一个模块在项目中被很多其他模块使用我们希望其他模块以别名的方式引用而不用相对路径的方式此时就可以使用别名映射。 例如某个模块绝对路径为
/assets/lib/tools.ts我们希望可以用别名的方式引用 import {} from tools;操作步骤如下
第一步在项目目录下创建一个导入映射文件 import-map.json
// import-map.json
{imports: {tools: ./assets/lib/tools.ts}
}imports应用到所有模块的 顶级映射。tools要映射的模块名。./assets/lib/tools.ts 是相对路径 此路径将解析为绝对路径 项目目录/assets/lib/tools.ts。 注意导入映射中的所有相对路径都是相对于导入映射文件本身的位置的 第二步在任意模块中使用以下方式引用模块tools 都将解析为模块的绝对路径。
import * as tools from tools;3、使用目录映射
目录映射允许映射指定目录下的所有模块。 例如要映射项目 assets/lib/tools 目录下的所有模块则导入映射的 json 文件如下所示
{imports: {tools/: ./assets/lib/tools/}
}除了 tools/ 指定的是我们要映射的目录其余的与 别名映射 一致。 这样项目中的模块都能以 import {} from tools/... 的形式来引用目录 tools 中的模块。
import * as a from tools/a;
import * as c from tools/b/c;tools/a 将解析为模块 项目目录/assets/lib/tools/a.ts tools/b/c 将解析为模块 项目/assets/lib/tools/b/c.ts。 (4)、TypeScript 支持导入映射所需配置
在项目目录下的 tsconfig.json 文件中配置paths 字段
// tsconfig.json
{compilerOptions: {paths: {// 注意这里的相对路径是相对于 tsconfig.json 所在的路径// 由于本例中 tsconfig.json 和 import-map.json 位于同一目录因此这里的相对路径也相似。tools: [./assets/lib/tools.ts],tools/*: [./assets/lib/tools/*]}}
}三、CocosCreator引擎模块 引擎通过模块 cc 向开发者暴露功能接口提供了所有引擎功能的访问模块以 ECMAScript 模块形式存在。
模块 cc 的内容是动态的可以在 CocosCreator 项目设置 中的 功能裁剪 进行启用或关闭。 1、引擎模块使用 Cocos Creator 3.8 引擎api 都在cc 中 使用标准的 ES6 模块导入语法将其导入如下导入需要使用的类
import {Component, // 导入类 Component_decorator, // 导入命名空间 _decoratorCCInteger, // 导入类 CCIntegerEventMouse, // 导入类 EventMouseinput, // 导入命名空间 inputNode, // 导入类 NodeLabel, // 导入类 NodeSprite // 导入类 Node
} from cc;const { ccclass, property,type,integer} _decorator;
ccclass(PlayerControl)
export class PlayerControl extends Component
{}如下整个 Cocos Creator 模块
import * as modules from cc;
const { ccclass, property,type,integer} _decorator;
ccclass(PlayerControl)
export class PlayerControl extends Component
{}2、引擎日志输出
import { log } from cc;
log(Hello world!);3、代码优化常量
引擎模块 cc/env 暴露了一些构建时的 常量这些常量代表执行环境、调试级别或平台标识。 (1)、执行环境:
BUILD是否正在构建后的环境中运行PREVIEW是否正在预览环境中运行EDITOR是否正在编辑器环境中运行 2、调试级别:
名称类型都为 boolean说明DEBUG是否处于调试模式。仅当构建时未勾选调试选项的情况下为 false其它情况下都为 trueDEV等价于 DEBUG/EDITOR/PREVIEW 调试级别使用如
import { log } from cc;
import { DEV } from cc/env;if (DEV) {log(I am in development mode!);
}
