Вызов переносимого класса Webpack + babel извне.

Когда вам поручено создать сниппет, который загружает приложение JS, например, загружает виджет, очень похожий на встраивание Google Analytics, вам необходимо внести несколько изменений в конфигурацию Webpack.

Представление пакета Webpack как библиотеки дает необходимый глобальный контекст внутри переменной. Теперь мы можем использовать эту переменную для внешнего вызова библиотеки из файла index.html.

Проблема?

Вызов класса из app.bundle.js. Передача данных в параметрах аргумента с использованием транспилированного кода через Babel 6 и Webpack 2. Это приведет к ошибке someFunc () undefined.

Почему это проблема?

После того, как код ES6 транслируется в пакет ES5, к классу нельзя получить доступ вне связанного кода. Простой пример ниже: -

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        <h1>My index file</h1>
        <div id="seat-selection">
        <script src="./dist/js/app.bundle.js"></script>
        <script type="text/javascript">
           window.onload = function(){
                new someFunc(someData)
            };
        </script>
    </body>
</html>

Решение?

Нам нужно настроить Webpack по-другому, изменив параметры вывода. Это говорит о том, что мы создаем доступ к транспилированному коду ES5 переменной с именем EntryPoint.

webpack.config.js

output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: 'app.bundle.js',
    libraryTarget: 'var',
    library: 'EntryPoint'
  },

index.js (обратите внимание, что мы используем var EntryPoint для вызова библиотеки).

<script src="./dist/js/app.bundle.js"></script>
   <script type="text/javascript">
       window.onload = function(){
         EntryPoint.run({ name : 'Joe Bloggs' }) 
       };
   </script>

app.js ‘или любое другое имя вашего выходного файла пакета’ (помните, что это ваш файл ES6, прежде чем он будет упакован).

(function () {
   'use strict';
}());
import helloWorld from './helloWorld.js'; // ES6 Module
module.exports = {
  run: function (name) {
    new helloWorld(name);
  }
};

Более подробный рабочий пример вы можете увидеть в одном из моих проектов на Github здесь.