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
- npm是安裝node.js時附帶的包管理工具
- lodash是我們項目中實際用到的js代碼包
- 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函數就被按需引入了,是不是很簡單呢~
讚賞作者
您的讚賞是對我最大的鼓勵和支持~