Внешние зависимости

Опция конфигурации externals позволяет исключить зависимости из выходных пакетов. Вместо этого создаваемый пакет полагается на то, что эта зависимость присутствует в среде потребителя. Эта функция, как правило, наиболее полезна для разработчиков библиотек, однако у неё есть множество применений.

Потребитель здесь — любое приложение конечного пользователя.

externals

string object function regex

Предотвратить объединение определённых import пакетов и вместо этого получать эти внешние зависимости во время выполнения.

Например, чтобы включить jQuery с CDN вместо объединения:

index.html

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

webpack.config.js

module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  }
};

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

import $ from 'jquery';

$('.my-element').animate(/* ... */);

Пакет с внешними зависимостями может использоваться в различных контекстах модулей, таких как модули CommonJS, AMD, глобальные и ES2015 модули. Внешняя библиотека может быть доступна в любом из этих форматов:

• root: Библиотека должна быть доступна как глобальная переменная (например, через тег script).
• commonjs: Библиотека должна быть доступна как модуль CommonJS.
• commonjs2: Аналогично вышесказанному, но где экспорт module.exports.default.
• amd: Аналогично commonjs, но использующее систему модулей AMD.

Принимаются следующие синтаксические конструкции...

строка

См. пример выше. Имя свойства jquery указывает на то, что модуль jquery в import $ from 'jquery' должен быть исключён. Для замены этого модуля будет использовано значение jQuery, чтобы получить глобальную jQuery переменную. Другими словами, когда предоставляется строка, она будет обрабатываться как root (определённая выше и ниже).

массив

module.exports = {
  //...
  externals: {
    subtract: ['./math', 'subtract']
  }
};

subtract: ['./math', 'subtract'] позволяет выбрать часть модуля commonjs, где ./math — это модуль, а ваш пакет требует только подмножества под переменной subtract. Этот пример будет переведён в require('./math').subtract;

объект

Объект с { root, amd, commonjs, ... } разрешен только для libraryTarget: 'umd'. Он не разрешен для других целевых библиотек.

module.exports = {
  //...
  externals : {
    react: 'react'
  },

  // or

  externals : {
    lodash : {
      commonjs: 'lodash',
      amd: 'lodash',
      root: '_' // indicates global variable
    }
  },

  // or

  externals : {
    subtract : {
      root: ['math', 'subtract']
    }
  }
};

Этот синтаксис используется для описания всех возможных способов доступности внешней библиотеки. lodash здесь доступна как lodash в системах модулей AMD и CommonJS, но доступна как _ в форме глобальной переменной. subtract здесь доступна через свойство subtract в глобальном объекте math (например, window['math']['subtract']).

функция

Возможно, будет полезно определить собственную функцию для управления поведением того, что вы хотите внешне вынести из webpack. webpack-node-externals, например, исключает все модули из каталога node_modules и предоставляет некоторые параметры, например, белый список пакетов.

В сущности, это сводится к следующему:

module.exports = {
  //...
  externals: [
    function(context, request, callback) {
      if (/^yourregex$/.test(request)){
        return callback(null, 'commonjs ' + request);
      }
      callback();
    }
  ]
};

'commonjs ' + request определяет тип модуля, который нужно внешне вынести.

регулярное выражение

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

module.exports = {
  //...
  externals: /^(jquery|\$)$/i
};

В этом случае любая зависимость с именем jQuery, заглавная или нет, или $ будет внешне вынесена.

Сочетание синтаксических конструкций

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

module.exports = {
  //...
  externals: [
    {
      // String
      react: 'react',
      // Object
      lodash : {
        commonjs: 'lodash',
        amd: 'lodash',
        root: '_' // indicates global variable
      },
      // Array
      subtract: ['./math', 'subtract']
    },
    // Function
    function(context, request, callback) {
      if (/^yourregex$/.test(request)){
        return callback(null, 'commonjs ' + request);
      }
      callback();
    },
    // Regex
    /^(jquery|\$)$/i
  ]
};

Для получения дополнительной информации о том, как использовать эту конфигурацию, обратитесь к статье о создании библиотеки.