Create a custom component as a typescript library and reuse in different projects

Hi @slackmoehrle @zzf520 ,
My requirement is to create a custom component say :

import { _decorator, Component } from 'cc';
const { ccclass, property} = _decorator;
@ccclass('GameScene')
export class GameScene extends Component {
    load () {
    }
   
    start () {
        console.log("GameScene: start called");
    }
}

I am able to compile above code as a library following this link:
how-to-write-a-typescript-library

to compile it successfully I have to use following configuration in tsconfig.json :

{
  "compilerOptions": {
    "skipLibCheck": true,
    "module": "commonjs",
    "target": "es2015",
    "declaration": true,
    "outDir": "./dist",
    "noImplicitAny": false,
    "strict": false,
    "paths": {
      "cc": ["./temp/declarations/cc"], 
      "cc/env" : ["./temp/declarations/cc.env"]
    },
    "experimentalDecorators": true
  },
  "types": [
    "./temp/declarations/cc.env",
    "./temp/declarations/jsb",
    "./temp/declarations/cc"
  ],
  "isolatedModules": true,
  "moduleResolution": "node",
  "include": [
    "src/**/*"
  ],
  "exclude": ["node_modules","temp"]
}

Now when using this package in some other project, I am not able to attach this component to a node.
It gives error

[Scene] Unresolved specifier cc

cc module is not getting register for this package.
checked modules.json at location
temp/programming/packer-driver/targets/editor/modules.json
resolvedImports value is null for cc for custom component

So question is how to create a typescript library having cc module as dependency. So that it can be used across projects.

Thanks,
Rahul

I can ask enginering to have a look.

We have been re-using TS Component, that we made, across projects.
But, we didn’t modify tsconfig.
We just used default one.

And what do you mean by compile as a library?
For us, we just drag and drop the xxx.ts file into another project and it works.

May be you should share your codes/project so that we can help you.

Hi @StudioAMK ,
I am attaching two zip files:

  1. common_library.zip
    This is typescript library project. It includes GameComponent.ts which is extended from Component class from cc module. It will generate a npm like package “common” module,which can be used in creator project as dependency.

  2. library_test.zip
    creator version: 3.3.2
    This is a creator project. It includes a MyGameComponent.ts script which needs to be extended from GameComponent from common_library.
    I have added common package as dependency in package.json.
    Once you open the library_test project in cocos creator. It will show errors for undefined cc module for GameComponent class from common module.

I hope I am clear about requirement.
Reason to create a library instead of dragging script to each project separately, As a team for many upcoming projects we want to include common code as separated library. which can be updated as npm package only.

Thanks,
Rahul

This scenario feels appropriate as an editor extension:

https://docs.cocos.com/creator/manual/zh/editor/extension/contributions-database.html

Extensions can carry scripts
And can be reused across projects

Hi @VisualSJ ,
Thanks this was very helpful.
you are right I can achieve a common module for different projects by adding it as database.
Just a query, how can I distribute this extension among other team members.
Is there anyway to publish extension for team only rather than to store.

Thanks,
Rahul

You can upload it to CocosStore:
https://store-my.cocos.com
http://store.cocos.com/app

Or through file sharing:
https://docs.cocos.com/creator/manual/en/editor/extension/install.html

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.