如何在非Node环境中使用Standalone Babel及箭头函数插件？

嘿，我之前刚好在纯前端环境里处理过类似的需求，完全不用Node也能搞定箭头函数转译兼容IE11，给你分享两个靠谱的方案：

方案一：直接在HTML中使用带属性的脚本标签 #

这种方式最直接，适合写在页面里的ES6代码：

1. 先引入Babel Standalone的脚本文件（确保你已经把它下载到本地项目里）

<script src="babel.min.js"></script>

2. 然后创建一个type="text/babel"的脚本标签，通过data-plugins属性指定需要的转译插件——这里我们需要transform-arrow-functions来处理箭头函数，如果还要兼容const/let这类块级作用域变量，再加个transform-block-scoping：

<script type="text/babel" data-plugins="transform-arrow-functions,transform-block-scoping">
  // 这里放心写你的ES6代码
  const greet = (name) => `Hello, ${name}!`;
  console.log(greet('IE11')); // 在IE11里也能正常执行
</script>

方案二：动态编译代码（适合处理字符串形式的ES6代码） #

如果你的代码是动态生成的字符串，或者需要在JS里手动控制编译过程，可以用Babel提供的transformAPI：

// 你的ES6源码
const es6Code = `
  const calculate = (a, b) => a + b;
  alert(calculate(2, 3));
`;

// 调用Babel.transform进行编译，指定需要的插件
const compiledCode = Babel.transform(es6Code, {
  plugins: ['transform-arrow-functions', 'transform-block-scoping']
}).code;

// 执行编译后的代码（这里用创建script标签的方式比eval更安全）
const script = document.createElement('script');
script.textContent = compiledCode;
document.body.appendChild(script);

小提示 #

• 除了箭头函数和块级作用域，IE11还不支持很多ES6特性，比如模板字符串，你可以根据需要添加对应的插件，比如transform-template-literals
• Babel Standalone已经把常用插件打包在里面了，不用额外下载，直接在配置里指定插件名称就行

这样就能在非Node环境下轻松转译ES6代码，完美兼容IE11啦！

内容的提问来源于stack exchange，提问作者Astronought