[javascript] 하나의 NPM 패키지에서 여러 ES6 모듈을 내보내는 방법

하나의 파일에 대략 5 개의 서로 다른 ES6 클래스로 구성된 비교적 작은 NPM 패키지를 만들었습니다.

export default class MyClass {
    // ...
}

그런 다음 다음과 같은 패키지의 시작점을 설정했습니다.

export { default as MyClass } from './my-class.js';
export { default as MyOtherClass } from './my-other-class.js';

그런 다음 webpack과 babel을 통해 진입 점을 실행하여 변환되고 축소 된 index.js로 끝납니다.

패키지 설치 및 가져 오기는 정상적으로 작동하지만 클라이언트 코드에서 다음을 수행 할 때 :

import { MyClass } from 'my-package';

“MyClass”를 가져 오는 것이 아니라 모든 클래스의 모든 종속성을 포함하여 전체 파일을 가져옵니다 (일부 클래스에는 큰 종속성이 있음).

이미 번들 패키지의 일부를 가져 오려고 할 때 webpack이 어떻게 작동하는지 알았습니다. 그래서 node_modules/my-packagebabel을 통해 실행되도록 로컬 웹 팩 구성을 설정 한 다음 시도했습니다.

import { MyClass } from 'my-package/src/index.js';

그러나 이것조차도 index.js에서 내 보낸 모든 단일 클래스를 가져옵니다. 내가 원하는 방식으로 작동하는 유일한 것은 내가하는 경우입니다.

import MyClass from 'my-package/src/my-class.js';

그러나 나는 오히려 오히려 :

1. node_modules 내부에서 babel을 실행하도록 webpack에 지시 할 필요가 없도록 변환되고 축소 된 파일을 가져올 수 있어야합니다.
2. 각 파일의 경로를 입력하지 않고 시작점에서 직접 각 개별 클래스를 가져올 수 있습니다.

가장 좋은 방법은 무엇입니까? 다른 사람들은 어떻게 비슷한 설정을 달성합니까? GlideJS에 ESM 버전의 패키지가있어 예를 들어 babel을 실행하지 않고도 필요한 것만 가져올 수 있습니다.

문제의 패키지 : https://github.com/powerbuoy/sleek-ui

webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        'sleek-ui': './src/js/sleek-ui.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        library: 'sleek-ui', // NOTE: Before adding this and libraryTarget I got errors saying "MyClass() is not a constructor" for some reason...
        libraryTarget: 'umd'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                ]
            }
        ]
    }
};

package.json

  "name": "sleek-ui",
  "version": "1.0.0",
  "description": "Lightweight SASS and JS library for common UI elements",
  "main": "dist/sleek-ui.js",
  "sideEffects": false, // NOTE: Added this from Abhishek's article but it changed nothing for me :/
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/powerbuoy/sleek-ui.git"
  },
  "author": "Andreas Lagerkvist",
  "license": "GPL-2.0-or-later",
  "bugs": {
    "url": "https://github.com/powerbuoy/sleek-ui/issues"
  },
  "homepage": "https://github.com/powerbuoy/sleek-ui#readme",
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "@babel/preset-env": "^7.8.6",
    "babel-loader": "^8.0.6",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "@glidejs/glide": "^3.4.1",
    "normalize.css": "^8.0.1"
  }
}

답변

{
  "main": "dist/sleek-ui.js",
  "module": "src/main.js"
}

{
  "type": "module",
  "main": "dist/sleek-ui.js",
  "exports": {
    ".": "dist/sleek-ui.js",
    "./module": "src/main.js"
  }
}

import MyClass from './my-class.js'
import MyOtherClass from './my-other-class.js'

export { MyClass, MyOtherClass }