Как экспортировать несколько модулей ES6 из одного пакета NPM - PullRequest
Новая
       9

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

16 голосов
/ 03 марта 2020

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

export default class MyClass {
    // ...
}

Затем я настроил точка входа для моего пакета, которая выглядит следующим образом: 

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

Затем я запустил точку входа через веб-пакет и babel, заканчивая транспонированным и минимизированным индексом. js

Установка и импорт пакета работает нормально, но когда я делаю из своего клиентского кода следующее: 

import { MyClass } from 'my-package';

Он не просто импортирует «MyClass», он импортирует весь файл, включая все зависимости каждого класса (некоторые из мои классы имеют огромные зависимости).

Я подумал, что так работает веб-пакет, когда вы пытаетесь импортировать части уже связанного пакета? Поэтому я настроил свою локальную конфигурацию веб-пакета для запуска node_modules/my-package через babel, а затем попытался: 

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

Но даже при этом импортируется каждый отдельный класс, экспортируемый по индексу. js. Единственное, что, кажется, работает так, как я хочу, это если я сделаю: 

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

Но я бы предпочел:

  1. Уметь импортировать переданный и уменьшенный файл так что мне не нужно указывать webpack запускать babel внутри node_modules и
  2. иметь возможность импортировать каждый отдельный класс непосредственно из моей точки входа вместо того, чтобы вводить путь к каждому файлу

Какая лучшая практика здесь? Как другие достигают подобных установок? Я заметил, что Glide JS имеет 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']
                        }
                    }
                ]
            }
        ]
    }
};

пакет. 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"
  }
}

Ответы [ 2 ]

1 голос
/ 09 марта 2020

Я подумал, что так работает веб-пакет, когда вы пытаетесь импортировать части уже связанного пакета?

Да, способ, которым вы настроили его, заключается в импорте каждого класса в index. js, который затем переносится в один файл (если он нацелен на ES5, что является наиболее распространенным *). Это означает, что когда этот файл импортируется в другой файл, он входит целиком со всеми этими классами.

Если вы хотите правильно потрясти дерево, вам следует избегать переноса его в общий пакет JS (ES5) , Мое предложение состоит в том, чтобы хранить модули ES6 либо отдельно, либо отдельно от комплекта ES5. Эта статья должна помочь вам полностью понять это и содержит рекомендованные инструкции. По сути, она сводится к настройке среды Babel с использованием preset-env (настоятельно рекомендуется, если вы ее еще не используете!) Для preserve Синтаксис ES6 . Вот соответствующая конфигурация Babel, если вы не хотите переходить на ES5: 

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

В статье подробно описано, как настроить 2 пакета, каждый из которых использует свой синтаксис модуля.

Также стоит отметить, и, как указано в статье, вы можете установить точку входа модуля ES в упаковке. 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 имеют общий формат JS, который должен включать все связанные файлы, поскольку ES5 не ' не имеет встроенной поддержки модулей. Это было в ES2015 / ES6.

0 голосов
/ 12 марта 2020

Это допустимый вариант использования. Конечная цель состоит в том, чтобы сделать это 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'. Easy peasy.

Веселись!

...