Cocos Creator + TypeScript项目中使用npm loadsh包

Cocos Creator + TypeScript + npm

本篇主要讲Cocos Creator的TypeScript项目中使用npm管理包的一种使用方法之一,并非所有的包都如下使用方法,但都大同小异

步骤1:创建新的工程

我创建了一个TypeScript语言的新的HelloWorld工程;

步骤2:npm装包

npm i lodash -save
npm i @types/lodash -save-dev

1. npm是安装node.js时附带的包管理工具
2. lodash是我们项目中实际用到的js代码包
3. types/lodash可以看到保存为开发环境,它实际上是一个由ts写的代码提示包,在项目编译中不会参与编译(大部分的主流npm包都有对应的ts代码提示包)

步骤3:代码中按需引入lodash函数

在HelloWorld.ts中,我决定引入深拷贝函数测试引入的包是否有问题

import cloneDeep = require('lodash/cloneDeep');

const obj = {
    age: 18,
    GetAge: function () {
        return this.age;
    }
}

const { ccclass, property } = cc._decorator;
@ccclass
export default class Helloworld extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = '';

    start() {
        this.label.string = this.text;

        const obj2 = cloneDeep(obj);

        console.log('source obj = ', obj);

        console.log('copy obj2 = ', obj2);

        console.log('is equal:', obj == obj2);
    }
}

切回Cocos Creator编辑器编译ts代码:

OK,编译通过,没有出错,可能有些朋友会对 import xxx = require(‘xx/xx’) 有疑惑,但是在ts中这是允许的,import在此充当了const的作用

步骤4:浏览器中运行看结果

OK,至此,我们的lodash中的cloneDeep函数就被按需引入了,是不是很简单呢~

赞赏作者

您的赞赏是对我最大的鼓励和支持~