0

ライブラリを公開しましたが、問題があります。コードにアクセスするには、次のようにする必要があります。

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

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

2 つの問題があります。

  1. libあるべきフォルダを使用する必要があります@akashshyam/color-utilities/index
  2. デフォルトのオブジェクトをエクスポートしました。しかし、それにアクセスするには、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 を試してみましたが、いくつかエラーがありました。私はバンドラーを使用することにオープンですが、構成を提供してください。これらの点のいずれかに光を当てていただければ幸いです。前もって感謝します!

4

0 に答える 0