Як експортувати кілька модулів ES6 з одного пакету NPM

Я створив порівняно невеликий пакет NPM, що складається з приблизно 5 різних класів ES6, що містяться в одному файлі кожен, вони виглядають приблизно так:

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-packageчерез babel і потім спробував:

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

Але навіть це імпортує кожен клас, експортований index.js. Єдине, що, здається, працює так, як мені хочеться, якщо я це робити:

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

Але я б набагато скоріше:

1. Бути в змозі імпортувати перекладений і мінімізований файл, щоб мені не довелося вести webpack, щоб запустити вавилону всередині node_modules і
2. Бути в змозі імпортувати кожен окремий клас безпосередньо з моєї точки входу, замість того, щоб вводити шлях до кожного файлу

Яка найкраща практика тут? Як інші досягають подібних налаштувань? Я помітив, що у GlideJS є пакет ESM свого пакету, який дозволяє імпортувати лише ті речі, які вам потрібні, не маючи, наприклад, запускати бабеля.

Розглянутий пакет: 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"
  }
}

Я зрозумів, що так працює webpack, коли ви намагаєтеся імпортувати частини вже упакованого пакету?

Так, спосіб, який ви його налаштували, імпортує кожен клас у index.js, який потім транслюється в один файл (якщо він націлений на ES5, який є найбільш поширеним *). Це означає, що коли цей файл імпортується в інший файл, він надходить у повному обсязі, з усіма цими класами.

Якщо ви хочете належного струшування дерев, вам слід уникати перекладання його в пакет CommonJS (ES5). Моя пропозиція - тримати модулі ES6 самостійно або в окремому місці від пакета ES5. Ця стаття повинна допомогти вам повністю зрозуміти це та має рекомендовані інструкції. По суті, це зводиться до встановлення середовища Babel за допомогою preset-env (настійно рекомендується, якщо ви його ще не використовуєте!) Для збереження синтаксису ES6 . Ось відповідна конфігурація Babel, якщо ви не хочете переводити на ES5:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ]
}

У статті описано, як налаштувати 2 пакети, кожен з яких використовує інший синтаксис модуля.

Також варто зазначити, і про це згадується в статті, ви можете встановити точку входу модуля ES в package.json. Це повідомляє Webpack / Babel, де можна знайти модулі ES6, що може бути все, що потрібно для вашого випадку використання. Здається, звичайна мудрість говорить:

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

Але у документації Node це:

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

Якби я встиг би, я пограв би з цим і побачив, що працює правильно, але цього має бути достатньо, щоб поставити вас на правильний шлях.

* Пакети, орієнтовані на ES5, знаходяться у форматі CommonJS, який повинен включати всі пов’язані файли, оскільки ES5 не підтримує нативний модуль. Це надійшло в ES2015 / ES6.

Це дійсний випадок використання. Кінцева мета - це зробити, import { MyClass } from 'my-package'але існує більш чистий спосіб зробити це.

Створіть файл індексу агрегатора у вашому my-package. В основному my-package/index.jsі це має виглядати так:

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

export { MyClass, MyOtherClass }

Тоді ви можете зробити import { MyClass } from 'my-package'. Простенька.

Веселіться!