Babel polyfill: запуск кода ES6 из ajax

По умолчанию теги сценария не запускаются при создании путем установки элемента innerHTML. Функция jQuery-s load делает это за вас, она проходит через dom и выполняет вновь созданные теги скрипта (используя eval). babel-browser не интегрирован с load jQuery. Вот почему это не работает.

Решение: не используйте babel-browser, browser-transforms или babel-browser-transform. Они либо не поддерживаются годами, либо даже удаляются. Используйте rollupjs или webpack для предварительной компиляции и объединения ваших исходных кодов, даже для разработки.

ИЗМЕНИТЬ

Если вы используете только функции es6, поддерживаемые всеми вашими целевыми браузерами, вам вообще не нужно транспилировать. Просто используйте теги type="text/javascript", а еще лучше голые теги <script>.

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

Я попробовал два способа заставить его работать: 1. Используйте webpack для компиляции компонента, мой webpack.config.js выглядит примерно так:

 var HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
 entry: {
     main: [
         'es6-shim',
         'promise-polyfill',
         'whatwg-fetch',
         './form_component.js' // Path to your app's entry file
     ]
 },
 output: {
     path: __dirname,
     filename: "bundle.js"
 },
 module: {
     rules: [
         {
             test: /\.js$/,
             use: {
                 loader: 'babel-loader',
                 options: {
                     presets: [
                         ['es2015', {
                             loose: true,
                             modules: false
                         }],
                         'react'
                     ]
                 }
             }
         }
     ]
 },
 plugins: [new HtmlWebpackPlugin()]
 };

Это работает, но bundle.js весит около 880 КБ, что слишком много только для компонента формы.

2. Поскольку проблема связана с тем, что скрипт babel не выполняется в функции jquery globalEval, я попытался предварительно скомпилировать его с помощью babel и использовать предварительно скомпилированный js, он также работает, и предварительно скомпилированный js имеет примерно тот же размер, что и исходный файл js. :

   babel form_component.js --presets react,es2015 > precompiled.js