代码编程,程序开发久了,基本都会逐渐形成一套自己收集的技术类库和常用的一些方法,有时候是从优秀的大神那里学习,有的是通过自己工作的摸索,然后都想作为类库为自己所用,有个源码更新的地方,甚至想到后期拿到社区开源供大家使用。
下面说一下如何使用Rollup.js
编译自己的类库,然后供Cocos Creator
使用。
环境
- Windows10
- npm
- ts
- rollup.js
- Cocos Creator2.3.3
新建项目
- 首先我们新建一个项目名字叫做
tslibsdemo
- 新建一个
package.json
内容如下:
1 | { |
- 新建一个
rollup.config.js
文件,内容如下:
1 | import typescript from '@rollup/plugin-typescript'; |
- 新建
tsconfig.json
文件 内容如下:
1 | { |
- 新建一个
src
文件夹,作为代码存放目录,新建一个dist
文件夹 作为构建编译后的目录。
放入写好的类库
- 放入三个模块作为测试:自定义 log 、 EnumUtils.ts和MathUtils.ts。
1 |
|
EnumUtils.ts
1 | export class EnumUtils { |
MathUtils.ts
1 | /** |
LoggerInterface.ts
1 | export interface LoggerInterface { |
CCLogger.ts
1 | import { LoggerInterface, LoggerOption } from "./LoggerInterface"; |
NativeLogger.ts
1 | import { LoggerInterface, LoggerOption } from "./LoggerInterface"; |
index.ts
1 | export {CCLogger} from "./log/CCLogger"; |
运行
- 初始化npm依赖:
1 | npm install |
成功后 多出一个目录 node_modules
- 如果没有安装
rollup
需要安装:
1 | npm install --global rollup |
- 接下来可以运行命令查看:
1 | # 默认使用rollup.config.js |
更多命令参考 https://www.rollupjs.com/
当然也可以写个shell 脚本 比如 叫做 build.sh
内容:rollup --config
- 查看结果:
测试类库
新建一个
Cocos Creator
项目libsbuilddemo
引入刚刚构建好的 dist 目录下的文件:
在新建的项目
HelloWorld.ts
的start
方法 写入测试代码:
1 | import {CCLogger, MathUtils} from "../libs/MyLibs"; |
- 查看输出结果:
以上就是如何使用 rollup.js 构建自己的类库的整个过程。
上面代码链接地址:点击前往
参考
--- 本文结束 The End ---