Извикване на транспилиран клас 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 тук.