如何为 Creator 添加 js/ts 第三方库支持

  1. 1. 一. 下载源文件
  2. 2. 二. 使用 npm
  3. 3. 三. 在 TypeScript 中使用 npm 安装的三方库

正如知乎我的这个回答中所说, 我们开始使用 Cocos Creaor 开发新的项目, 所以以后这个博客会陆续开始更新一些 Creator 相关的文章.

我们在项目开发的过程中, 肯定会遇到一些项目间通用的需求, 比如 压缩/加密 之类的, 我们当然可以自己实现一个, 但更好的做法是找找网上有没有别人实现好的库直接拿来用, 今天我们就来看看如何为 Creator 添加添加 js/ts 第三方库支持.

一. 下载源文件

javascript-state-machine 为例, 我们可以在 Clone or Download 中选择 Download Zip 下载源文件压缩包, 解压后在将 dist/state-machine.js 复制到我们项目中的 assets/Script 目录中.

然后在我们的代码中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import StateMachine from "state-machine";
cc.Class({
extends: cc.Component,
properties: {
label: {
default: null,
type: cc.Label
},
text: 'Hello, World!'
},
onLoad: function () {
this.label.string = this.text;
var fsm = new StateMachine({
init: 'solid',
transitions: [
{ name: 'melt', from: 'solid', to: 'liquid' },
{ name: 'freeze', from: 'liquid', to: 'solid' },
{ name: 'vaporize', from: 'liquid', to: 'gas' },
{ name: 'condense', from: 'gas', to: 'liquid' }
],
methods: {
onMelt: function() { console.log('I melted') },
onFreeze: function() { console.log('I froze') },
onVaporize: function() { console.log('I vaporized') },
onCondense: function() { console.log('I condensed') }
}
});
fsm.melt();
}
});

在控制台中可以看到输出:

1
I melted

二. 使用 npm

搞 js 的同学都会知道 npm 这个 js 最大的轮子集中营, 它可以很方便的帮你安装/管理所需的第三方依赖库. 如果你觉得上面下载代码的形式太过繁琐的话, 就可以考虑使用 npm 来安装.

npm 会在你安装 nodejs 时自动拥有, 可以使用 npm -v 命令检查 npm 状态. 下面我们要观察下你的项目有没有 package.json 这个文件, 如果没有的话我们要先使用:

1
npm init

初始化项目, 需要填一堆信息, 基本上一路回车就可以. 完成之后我们可以去 npm 的网站上搜索下是否存在我们需要的库, 然后用 npm instal xxx --save 命令安装.

我们还是以 javascript-state-machine 距离, 我们可以找到它在 npm 上的这个页面, 然后安装:

1
npm install javascript-state-machine --save

安装完成后, 我们有了一个新的问题, 如何去 require 这个文件呢 ? 之前源码直接 require 的方式肯定是不行的了, 最终在论坛中找到了解决方案, 我们需要这样:

1
import StateMachine from "javascript-state-machine";

三. 在 TypeScript 中使用 npm 安装的三方库

上面讲的都是 js 的项目, 那么 ts 的项目又该如何搞呢 ? 我们除了 js 中的那些操作外还需要安装一个 ts 的标注库.

我们先去 TypeSearch 搜索下是否有我们需要的库的标注库:

点击后会跳转的 npm 对应的页面, 我们要根据提示安装这个库:

1
npm install --save @types/javascript-state-machine

这样我们就可以在 TypeScript 中使用下面代码去 import :

1
import * as StateMachine from "javascript-state-machine";

值得一提的是, 这些 @types 的库很多都是大家自己制作后贡献给社区的, 集合在 DefinitelyTyped 这个仓库中, 省去了我么自己标注的工作, 感谢这些贡献者们.

还有一个问题, 这些标注库更新可能落后于原始项目, 因此我们要安装对应版本的原始库才能够正确提示, 对应版本可以在 node_modules/@types/javascript-state-machine/index.d.ts 找到:

1
// Type definitions for Finite State Machine 2.4

因此, 我们要安装 javascript-state-machine 需要指定版本:

1
npm install javascript-state-machine@2.4 --save

以上就是我们安装第三方库的经验, 希望能够帮助到大家. 我们也是才开始使用 Creator, 如果遇到问题, 希望可以和大家多多交流.