javascript - Babel polyfill：从 ajax 运行 ES6 代码

Question

我正在尝试设置一个页面，该页面使用 ajax 加载 HTML 页面，并将主机页面上的元素内容设置为从服务器提取的 HTML。HTML 可能包含脚本标签。

这适用于常规脚本元素（ES5 或“text/javascript”），但是当我将类型设置为“text/babel”时，代码不会运行。

如果我直接访问这个页面（即没有发生 ajaxing），“text/babel”代码运行得很好。有什么东西阻止 Babel 意识到这些脚本元素吗？

Answer 1

默认情况下，通过设置元素的innerHTML. jQuery-sload函数为您完成，它遍历 dom 并执行新创建的脚本标签（通过使用 eval）。babel-browser没有与 jQuery 的load. 所以这就是为什么它不起作用。

解决方案：不要使用 babel-browser、browser-transforms 或 babel-browser-transform。这些要么多年不维护，要么被移除。使用 rollupjs 或 webpack 预编译和捆绑您的源代码，甚至用于开发。

编辑

如果您只使用所有目标浏览器都支持的 es6 功能，则根本不需要转译。只需使用type="text/javascript"，甚至更好的裸<script>标签。

Answer 2

这正是我在旧的 jquery 网站中尝试使用 react 组件时遇到的问题。

我尝试了两种方法让它工作： 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 KB，对于表单组件来说太大了。

2. 由于问题是由于 jquery 的 globalEval 函数中没有执行 babel 脚本，我尝试使用 babel 预编译它，并使用预编译的 js，它也可以工作，并且预编译的 js 与原始 js 文件的大小大致相同。 ：

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