ライブラリを公開しましたが、問題があります。コードにアクセスするには、次のようにする必要があります。
const {
default: { getContrast },
} = require('@akashshyam/color-utilities/lib/index');
console.log(getContrast('#ffffff'));
2 つの問題があります。
lib
あるべきフォルダを使用する必要があります@akashshyam/color-utilities/index
- デフォルトのオブジェクトをエクスポートしました。しかし、それにアクセスするには、
default
プロパティを使用する必要があります
これが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"
],
}
さて、vanilla JS にコンパイルする前後のフォルダー構造は次のとおりです。
を除くすべてのファイルには、index.js
エクスポートされる 1 つ以上の関数があります。index.js
すべての関数を含むオブジェクトを作成しています:
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,
};
また、これらの複数のファイルを 1 つのファイルに結合し、コードを縮小したいと考えています。現在、これらのファイルをコンパイルするために typescript コンパイラを使用しています。webpack を試してみましたが、いくつかエラーがありました。私はバンドラーを使用することにオープンですが、構成を提供してください。これらの点のいずれかに光を当てていただければ幸いです。前もって感謝します!