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函數就被按需引入了,是不是很簡單呢~

讚賞作者

您的讚賞是對我最大的鼓勵和支持~
StudyAnyTime

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章