накопительный эквивалент "browserify -r" - PullRequest
Новая
       46

накопительный эквивалент "browserify -r"

0 голосов
/ 27 января 2019

Мне нужно принудительно ввести некоторые модули в свой пакет, так как они требуются динамически через некоторый код, как показано ниже: 

var moduleName = "someModule";
var myModule = require(moduleName);

Я использовал browserify для связывания этого (через browserify -r или эквивалент API).

Я пытаюсь перейти на накопительный пакет и не понимаю, как это сделать с помощью накопительного пакета. По сути, я просто хочу ввести некоторые модули в пакет и сделать их доступными глобально с помощью оператора require.

1 Ответ

0 голосов
/ 05 февраля 2019

Я думаю, что ключом здесь является использование нового синтаксиса модуля ES6, как описано в документации накопительного пакета. Это также даст Rollup возможность применять такие функции, как чанкинг и тряска деревьев.

Еще одна важная вещь - это указать, что может быть импортировано. Под этим я подразумеваю использовать операторы типа «import ('./ module1.js')» вместо «import (some_variable)». Для Rollup сложно определить все возможное содержимое переменной, которая используется при импорте. Поэтому я бы использовал здесь явные имена файлов, но обернул все в какое-то условие if / else.

Рассмотрим следующий пример:

Файл ./src/main.js:

let num = Math.random() * 10;
let condition = Math.round(num % 3);

let mod;

if (condition === 1) {
  import('./module1.js').then((module)=> {
    log(module);
  });
} else if (condition === 2) {
  import('./module2.js').then((module)=> {
    log(module);
  });
} else {
  import('./module3.js').then((module)=> {
    log(module);
  });
}

function log(module) {
  mod = module;
  console.log(mod.test());
  console.log('Done');
}

Файл ./src/module1.js:

function test() {
  return 'This is 1!';
}

export { test };

Файлы module2.js и module3.js такие же, как и module1. Разница лишь в том, что они регистрируют «Это 2!» и «Это 3!».

Конфигурация Rollup выглядит следующим образом: 

const production = !process.env.ROLLUP_WATCH;

export default {
  inlineDynamicImports: true,
  input: 'src/main.js',
  output: {
    dir: 'public/',
    format: 'esm',
    sourcemap: true
  }
};

Если вы запустите 'rollup -c', тогда будет один файл './public/main.js'. Этот комплект будет включать все три модуля. Обычно Rollup создает main.js и три блока. Используя параметр inlineDynamicImports = true, Rollup помещает все в один файл.

Вы также можете изменить формат в конфигурации Rollup на «iife» (или amd, cjs, umd), если хотите.

...