0

I've published the library but there's a problem. I need to do something like this to access my code:

const {
    default: { getContrast },
} = require('@akashshyam/color-utilities/lib/index');

console.log(getContrast('#ffffff'));

There are two problems:

  1. I need to use the lib folder where it should be just @akashshyam/color-utilities/index
  2. I've exported a default object. But to access that I need to use the default property

Here's the package.json

{
    "main": "lib/index.js",
    "types": "lib/index.d.ts",
    "scripts": {
        "build": "tsc",
        "test": "mocha --reporter spec --require ts-node/register src/**/*.test.ts",
        "prepare": "npm run build",
        "lint": "eslint",
        "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
        "prepublishOnly": "npm run test && npm run lint",
        "preversion": "npm run lint",
        "version": "npm run format && git add .",
        "postversion": "git push && git push --tags"
    },
    "files": [
        "/lib"
    ],
}

Now, the folder structure before and after compiling to vanilla JS:

enter image description here

All of the files except index.js have one or more functions which are exported. I'm creating an object in index.js which contains all the functions:

import { getContrast } from './colorContrast';
import { HSLToHex, HSLToRGB, RGBToHSL, RGBToHex, hexToHSL, hexToRGB } from './colorConversion';
import { separateHSL, separateRGB } from './colorSeparation';
import { validateHSL, validateHex, validateRGB } from './colorValidators';

export default {
    getContrast,
    HSLToHex,
    HSLToRGB,
    RGBToHSL,
    RGBToHex,
    hexToHSL,
    hexToRGB,
    separateHSL,
    separateRGB,
    validateHSL,
    validateHex,
    validateRGB,
};

Also, I'd like to combine these multiple files into one file and minify the code. I'm currently using the typescript compiler for compiling these files. I tried webpack but I had some errors. I'm open to using bundlers but please provide the configuration. I hope you guys can shed some light on any of these points. Thanks in advance!

Akash
  • 762
  • 7
  • 25
  • It's neither necessary nor off incorrect to do so. When you provide a package, whether written in TypeScript or JavaScript, which will be used by other projects as dependency, those projects, which depend on your library will Minify it and optimize it properly. In short, let your consumers, who are composing applications from various libraries and their own source code, use their own buildtools flexibly to optimize their end distributable – Aluan Haddad May 20 '21 at 11:33
  • Oh that's great! Thanks a lot, One problem solved. Any idea about the other two? – Akash May 20 '21 at 11:42
  • It depends on how your target user base. If you expect other consumers to be consuming your package as a set of ES Module, then you should not use an aggregating object exported as default as your primary entry point. That's because your package consists of a series of independent functions which consumers might want to import independently. There are different considerations when someone is consuming your package from a common JS project but this is a complex topic and there are ways to service both communities – Aluan Haddad May 20 '21 at 11:50
  • I intend for this to be used in the browser with either vanilla JS or alongside a framework. The setup is not bad, but I haven't seen any libraries that ask the consumers to import the functions in such fashion. – Akash May 20 '21 at 11:54
  • Remove the default export and simply re-export all of the functions from the index file – Aluan Haddad May 20 '21 at 11:57
  • You mean like "export const SOME_FUNC = MY_FUNC1" – Akash May 20 '21 at 11:59
  • Not at all. I mean `export { getContrast } from './colorContrast'; ` in `index`. That's a basic feature of es modules. I suggest you become familiar with the syntax and semantics of es modules – Aluan Haddad May 20 '21 at 12:13
  • Presumably, the consumer will then write `const { getContrast } = require('@akashshyam/color-utilities/lib/index'); ` this of course depends on the importing project loader and other factors, but it should work in general – Aluan Haddad May 20 '21 at 12:16
  • Oh ok..... I did not know about that. Thanks a lot! It would be great if you could tell me how to remove the `lib` in the path. I mean currently we import it like this: `const { getContrast } = require('@akashshyam/color-utilities/lib/index');` and it should be like this: `const { getContrast } = require('@akashshyam/color-utilities')`. I just need to get rid of the `lib` – Akash May 20 '21 at 12:36
  • `require('@akashshyam/color-utilities') ` should do it. It sounds like a problem with your package.json – Aluan Haddad May 20 '21 at 12:42
  • Yes, but then my actual code seems to be inside the `lib` folder. But i've added the "lib" folder according to an online tutorial. – Akash May 20 '21 at 12:53

0 Answers0