Question

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

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

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

Answer 1

默认情况下，脚本标记在通过设置元素innerHTML创建时不会运行。 jQuery -s load函数为你做，它遍历dom并执行新创建的脚本标记（通过使用eval）。 babel-browser未与jQuery的load集成。所以这就是为什么它不起作用。

解决方案：不要使用babel-browser，浏览器转换或babel-browser-transform。这些要么不是为了yerars维护，要么甚至被删除。使用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，这对于表单组件而言太大了。

由于问题是由于babel脚本没有在jquery的globalEval函数中执行，我试图用babel预编译它，并使用预编译的js，它也有效，预编译的js是大小与原始js文件大小相同。：

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

Babel polyfill：从ajax运行ES6代码

2 个答案: