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

Question

Я пытаюсь настроить страницу, которая загружает HTML-страницы с помощью ajax и устанавливает содержимое элемента на странице хоста в HTML-код, извлекаемый с сервера. HTML может содержать теги скрипта.

Это нормально работает для обычных элементов скрипта (ES5 или "text/javascript"), но когда я устанавливаю тип "text/babel", код не запускается.

Если я захожу на эту страницу напрямую (т. Е. Никакой Ajaxing не происходит), код "text / babel" работает просто отлично. Есть ли что-то, что мешает Вавилону осознать эти элементы сценария?

Answer 1

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

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

РЕДАКТИРОВАТЬ

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

Answer 2

Это как раз та проблема, с которой я сталкиваюсь, когда пытаюсь использовать реагирующий компонент на старом веб-сайте 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 не выполняется в функции globalEval в jquery, я попытался предварительно скомпилировать его с помощью babel и использовать предварительно скомпилированный js, он также работает, и предварительно скомпилированный js имеет примерно тот же размер, что и исходный файл js.:

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