I tried to use rollup, but dont think i am packaging right. Cuase i get an error saying its not a module when i try to use via npm in a react app.
@RaananW can you please help me make a rollup wrapper. I dont think I got the details right
because i cant use in a react app. How would you make the wrapper package to be consumed via npm in a react app ?
Here is what I have so far, but again, does not work
rollup.config.json
import { terser } from "rollup-plugin-terser";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import pkg from "./package.json";
export default {
input: "src/index.ts",
output: [
{
file: pkg.main,
format: "cjs",
},
{
file: pkg.module,
format: "es",
}
],
plugins: [
typescript(),
resolve(),
commonjs(),
terser()
]
};
package.json
{
"name": "babylon-toolkit",
"version": "7.15.10",
"description": "Babylon Toolkit Unity Exporter Runtime",
"typings": "index.d.ts",
"browser": "babylon.toolkit.js",
"module": "dist/babylon.toolkit.esm.js",
"main": "dist/babylon.toolkit.cjs.js",
"scripts": {
"build": "rollup -c"
},
"keywords": [],
"author": "Mackey Kinard",
"license": "MIT",
"devDependencies": {
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-typescript": "^11.1.6",
"copyfiles": "^2.4.1",
"rollup": "^2.79.1",
"rollup-plugin-terser": "^7.0.2",
"tslib": "^2.6.2",
"typescript": "^5.3.3"
},
"dependencies": {}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"outDir": "./dist",
"strict": true,
"declaration": false,
"esModuleInterop": true
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
index.d.ts
/// <reference path="babylon.toolkit.d.ts" />
/* eslint-disable @typescript-eslint/naming-convention */
/* eslint-disable @typescript-eslint/no-unused-vars */
declare module "babylon-toolkit" {
export = BABYLON.Toolkit;
}
and finally the entry point: index.js
const wnd:any = window;
if (wnd.BABYLON != undefined && wnd.BABYLON != null) {
// console.warn("BABYLON TOOLKIT: BABYLON Namespace Detected");
} else {
// console.error("BABYLON TOOLKIT: BABYLON Namespace Not Found");
}
Project file structure
And babylon.toolkit.js and babylon.toolkit.d.ts are the actual library files i am trying to wrap so they can be consumed in a react app