разработка микро-интерфейса с использованием веб-пакета - PullRequest
Новая
       45

разработка микро-интерфейса с использованием веб-пакета

1 голос
/ 04 мая 2020

Я пытаюсь построить экосистему микро-фронтенда. Многие команды разрабатывают различные компоненты, чтобы приложение работало вместе на одной странице как одно-страничное приложение. Все компоненты должны быть собраны и развернуты независимо друг от друга и должны указываться на одной странице HTML, чтобы начать совместную работу путем разрешения во время выполнения. Например, в производстве у нас должен быть следующий файл скрипта на странице html: 

<script src="http://deploy-server/external/vendor1.js" />
<script src="http://deploy-server/external/vendor2.js" />
<script src="http://deploy-server/external/vendor3.js" />
<script src="http://deploy-server/internal/comp1.js" />
<script src="http://deploy-server/internal/comp2.js" />
<script src="http://deploy-server/internal/comp3.js" />

Теперь ниже будут детали пакета: 

vendor1 -> Reactjs, react-dom, react-router (most used lib for making react eco-system, Used by all internal component scripts)
vendor2.js -> react-datepicker, lodash, (libraires used by comp2.js)
vendor3.js -> Used by comp3.js

comp1. js, comp2. js, comp3. js -> Использование vendor1. js и может использовать или может начать использовать модули vendor2 и vendor3 js в будущем.

Как связать файлы внешних поставщиков и внутренние библиотеки по отдельности и в то же время хотят использовать их для совместного использования в разных командах для разработки. Предположим, у меня есть в комплекте vendor1. js, как его следует использовать для разработки и сборки comp3, comp4, ....?

Я пытался собрать vendor1. js, используя «shared», но при обращении к нему с comp2. js, получая ошибку во время выполнения.

Редактировать: Добавление кода, который я пытался поделиться файлом вендора другой командой, я создал файл вендора в app1, имея ниже webpack.config. js

   entry: {
      home: { 
        import: './src/app1-index.js',
        dependOn: 'shared',
        filename: 'js/app1.js',
      },
      shared: ['react', 'react-dom', 'react-is']
    },
    output: {
      publicPath: '/',
      path: path.join(__dirname, '/build/'),
      filename: `js/vendor.js`,
    },

Это создало 2 файла: 

       Asset      Size
  js/app1.js  4.82 KiB  [emitted]  [name: home]
js/vendor.js   993 KiB  [emitted]  [name: shared]

Использование этих двух файлов вместе работает нормально, потому что я связал их в одном процессе. Ниже приведен html, который я использовал: 

  <script src="/build/js/vendor.js" ></script>
  <script src="/build/js/app1.js" ></script>

Теперь, так как я хочу, чтобы файл вендора был доступен для другой команды, в другом приложении, app2, я держался ниже webpack.config: 

entry: './src/app2-index.js',
externals : {
  react: 'react',
  'react-dom': 'react-dom',
  'react-is': 'react-is'
},
output: {
  publicPath: '/',
  path: path.join(__dirname, '/build/'),
  filename: `js/app2.js`,
},

Это создало только 1 файл: 

     Asset     Size
js/app2.js  6.3 KiB  [emitted]  [name: main]

Упомянутые внешние элементы - это модули, которые будут обслуживаться поставщиком. js создано ранее.

Сейчас включено использование app2. js с ранее созданным файлом вендора не работает. Я скопировал vendor. js из предыдущей папки сборки в папку сборки app2: 

  <script src="/build/js/vendor.js" ></script>
  <script src="/build/js/app2.js" ></script>

Это ошибка сгенерирования:

ReferenceError: реакция не определена

Я понимаю, почему это не работает, может быть потому, что они не связаны в одном процессе. Но тогда как мы можем добиться этого с помощью веб-пакета?

Я хочу объединить внешние библиотеки в поставщике. js и хочу распространить их среди другой группы, чтобы начать использовать ее, но они (группа diff) не должны быть комплектными. эти модули поставщиков при возврате их пакета приложений. Зависимые модули могут быть разрешены только во время выполнения в браузере.

Аналогично, после разработки comp1 team1 поделится своим файлом с team2 для сборки comp2, предполагая, что comp2 зависит от comp1, но совместное использование не должно выполняться через * Пакет 1066 *, скорее всего, должен быть через файл сценария, и team2 может предположить, что он будет решен их модулем webpack comp2 во время выполнения.

Можем ли мы добиться этого в webpack? Я попытался использовать внешний и поделился. Любые другие варианты я должен попробовать?

...