Как создать библиотеку, в которой при необходимости можно импортировать отдельные компоненты? - PullRequest
Новая
       37

Как создать библиотеку, в которой при необходимости можно импортировать отдельные компоненты?

0 голосов
/ 01 октября 2018

Я написал библиотеку в es6, используя импорт / экспорт.Я могу связать эту библиотеку, используя Rollup, в iife, которое можно использовать в браузере.

Я также хочу иметь возможность использовать эту библиотеку в других проектах.Однако обычно я не хочу включать всю библиотеку, только ее части.

Поскольку библиотека написана с использованием импорта / экспорта es6, я могу включить файл unbundled index.js в качестве зависимости в другом проекте изатем import { myFunc } from 'my-lib', и это прекрасно работает - я получаю myFunc только когда мой проект связан.

Однако я столкнулся с проблемой, потому что эти файлы не были обработаны babel и поэтому содержат код es6, такой как функции стрелок.,Я читал, что если вы собираетесь опубликовать библиотеку, ее не нужно переносить конечному пользователю.

Как взять библиотеку es6 и собрать ее таким образом, чтобы она передавалась, но также может импортировать отдельные компоненты?Я хочу, чтобы ситуация была похожа на организацию lodash.

Это не просто сформулировать, поэтому, если что-то не понятно, оставьте комментарий, и я отредактирую свой вопрос, чтобы попытаться уточнить.

1 Ответ

0 голосов
/ 06 октября 2018

Я обнаружил, что лучше всего использовать веб-пакет для создания 2 модулей.Один для сети и один для узла.

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

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

Ваш веб-пакет будет экспортировать массив вместо объекта.

Вот официальный фрагмент веб-пакета (https://webpack.js.org/concepts/targets/)

const path = require('path');
const serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.node.js'
  }
  //…
};

const clientConfig = {
  target: 'web', // <=== can be omitted as default is 'web'
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js'
  }
  //…
};

module.exports = [ serverConfig, clientConfig ];
...