TS项目引用第三方库(以lodash为例)的一种姿势

最近项目中使用到了lodash库,于是研究了一下如何在ts项目中使用并且包含d.ts定义,分享给大家。

环境:
Creator版本2.3.3,lodash版本4.17.15

参考资料:

  1. 插件脚本:http://docs.cocos.com/creator/manual/zh/scripting/plugin-scripts.html?h=%E6%8F%92%E4%BB%B6%E8%84%9A%E6%9C%AC
  2. lodash官网:https://www.lodashjs.com/
  3. node npm typescript等

流程:

  1. 下载lodash

  2. 将下载下来的loadash.min.js文件放入creator中,并设置为插件脚本

  3. 在npm中安装提示依赖 @types/lodash
    在项目根目录下执行:
    npm install --save @types/lodash
    修改.gitignore文件,添加:
    node_modules/

  4. 使用方式(推荐):
    在Helloworld.ts文件start方法中添加代码:
    console.log(globalThis._.VERSION)
    【注意】globalThis可以使用window代替
    【注意】包含lodash的定义文件,在vscode中将鼠标放置在 _ 上时会有显示:

  5. 验证方式:

至此,就可以在项目中快乐的使用lodash库了。针对其他的第三方库,流程也是类似的。

附加:错误的使用方式

import * as _ from "lodash"
import _ = require("lodash")
等方式导入都是错误的。
虽然在编辑器中不会报错,但是运行会出现差异,原因是这样会从某个犄角旮旯里寻找lodash,进阶可以搜索「node模块的查找顺序」
console.log(_.VERSION, globalThis._.VERSION)

可以从截图中看出2者输出的版本是不同的。

2赞

目前用Creator 3.0-preview.1,使用了版主說的方法
globalThis._.VERSION 印出來的是 4.17.15,但就算在reference.d.ts增加Lodash,仍然沒辦法用Lodash,但其他插件如TweenMax跟TimelineMax是可以用的。

在ts的项目中,我们不能直接使用npm 安装某个包,然后直接在需要使用包的ts.文件里面去使用 import xxx from 'xxx’这样去使用包?必须是要这样?把第三方库的包。弄成插件脚本?

还有没有类似的性能库?