Извикване на транспилиран клас Webpack + babel извън неговия обхват.

Когато имате задача да създадете фрагмент, който зарежда JS приложение, например зареждане на джаджа, подобно на вграждане на Google Анализ, вие се нуждаете от няколко промени в конфигурацията на 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 за извикване на lib).

<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 тук.