Сборка модуля для использования в среде без модулей - PullRequest
Новая
       34

Сборка модуля для использования в среде без модулей

0 голосов
/ 04 июля 2018

Наше приложение использует пространства имен TypeScript и не использует какие-либо модули. Мы хотим использовать react-datepicker, который написан с использованием модулей.

Например, он содержит следующий код: 

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import onClickOutside from 'react-onclickoutside';
import moment from 'moment';
import { Manager, Popper, Target } from 'react-popper';
...
export default DatePicker;

Или перевезено: 

var React = _interopDefault(require('react'));
var PropTypes = _interopDefault(require('prop-types'));
var classnames = _interopDefault(require('classnames'));
var onClickOutside = _interopDefault(require('react-onclickoutside'));
var moment = _interopDefault(require('moment'));
var reactPopper = require('react-popper');
...
exports['default'] = DatePicker;

Для этого пакета требуется собрать js-комплект, который будет содержать react-datepicker как глобальную переменную DatePicker и все ее зависимости, кроме react, moment, classnames.

Эти библиотеки уже добавлены в приложение как глобальные переменные (React, moment, classNames), поэтому они должны использовать эти глобальные переменные.

Существуют ли плагины и методы для rollup, webpack и т. Д., Которые могут помочь в создании такого комплекта?

1 Ответ

0 голосов
/ 05 июля 2018

Этого можно добиться с помощью накопительного пакета, вам необходимо использовать его внешний и глобальный параметры, например: 

external: ['react', 'react-dom', 'moment', 'classnames'],
globals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'classnames': 'classNames',
    'moment': 'moment'
},

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

import commonjs from "rollup-plugin-commonjs";
import resolve from 'rollup-plugin-node-resolve';

Кроме того, вам, возможно, придется использовать rollup-plugin-replace, так как реагирующий на дату сборщик, похоже, включает в свой код process.env.NODE_ENV, и вам придется удалить его.

Если вы хотите увидеть полный рабочий пример, проверьте этот репозиторий, который я создал: https://github.com/mxcoder/rollup-iife-react-datepicker

...