Создайте «эквивалент» модуля ES6 с помощью параметров вывода webpack. - PullRequest
Новая
       30

Создайте «эквивалент» модуля ES6 с помощью параметров вывода webpack.

3 голосов
/ 23 мая 2019

Во-первых, извинения!Я изо всех сил пытался подвести итог проблемы в названии, поэтому, пожалуйста, не стесняйтесь исправлять.

Проблема

Предположим, у меня есть два файла ES6, которые предоставляют функции по умолчанию 

// file_1.js
export default function(){ /* do the thing */ }

// file_2.js
export default function(){ /* do the other thing */ }

СейчасЯ связываю file_1 в модуль, используя webpack (с загрузчиком babel), используя следующую конфигурацию вывода 

// webpack config 1.
{
   ...
   entry : '/path/to/file_1.js'
   output : {
      path: '/where/it/goes/',
      filename : 'main.js',
      library: 'my_component',
      libraryTarget: 'var'
   }
}

У меня также есть минимальный package.json, поэтому он может быть импортирован как модуль npm { name: 'file_1', main: 'main.js' }

Теперь проблема возникает, когда я хочу связать воедино код из file_1 и модуля file_2 единообразным образом. 

// master_entry.js

const components = {
    file_1 : require('file_1'),
    file_2 : require('/path/to/file_2')
}

Если я свяжу вышеперечисленное и посмотрю нарезультирующая форма components выглядит так: 

console.log(components.file_1)
// outputs
Module {__esModule: true, Symbol(Symbol.toStringTag): "Module" }

console.log(components.file_2)
// outputs
Module {default: f, __esModule: true, Symbol(Symbol.toStringTag): "Module" }

Следовательно, для file_2 (который не был предварительно объединен) у меня есть доступная функция по умолчанию - это то, что я хочу.Как добиться того же при объединении file_1?

Я попытался поиграться с опциями output webpack, такими как library, libraryTarget, libraryExport.Однако я немного растерялся и провел слишком много времени в документах - отсюда и крик о помощи!

Заранее спасибо.

Для ясности

file_1.js-webpack-> пакет file_1 (точка входа file_1.js) master_entry -webpack-> main.js

Т.е. сначала запускается веб-пакет на file_1.js, а затем при комбинации импорта file_1пакет и file_2.js.

1 Ответ

1 голос
/ 28 мая 2019

Мне кажется, у меня есть решение;) 

// file_1.js
export default function file1(){ console.log('file_1') }

// file_2.js
export default function file2(){ console.log('file_2') }

Файл webpack.config.js должен выглядеть следующим образом 

entry: {
  file1: './sources/js/file_1.js',
  file2: './sources/js/file_2.js',
},
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: './[name].js',
  library: '[name]',
  libraryExport: 'default',
  libraryTarget: 'umd', // you can use libraries everywhere, e.g requirejs, node 
  umdNamedDefine: true,
},

Теперь у вас есть доступ к: 

<script>
  new file1(); // console.log show file_2
  new file2(); // console.log show file_2
</script>

Теперь вы также можете передавать опции в функции.Взгляните на мое решение

...