使用Babel 处理浏览器对ES6的兼容性问题

在编程中如果使用了ES6的新特性，浏览器若没有更新版本，或者新版本中没有对ES6的特性进行兼容，那么浏览器肯定无法识别我们的ES6代码，就会报错，这就是浏览器对ES6的兼容性问题。

在网上找到了一篇如何使用Babel 处理浏览器对ES6的兼容性问题，收入笔记。

Babel 也可以用于浏览器环境。但是，从 Babel 6.0 开始，不再直接提供浏览器版本，而是要用构建工具构建出来。如果你没有或不想使用构建工具

1.通过安装5.x版本的babel-core模块获取

$ npm install babel-core@old

运行上面的命令以后，就可以在当前目录的node_modules/babel-core/子目录里面，找到babel的浏览器版本browser.js（未精简）和browser.min.js（已精简）。

然后，将下面的代码插入网页。

<script src="node_modules/babel-core/browser.js"></script><script type="text/babel">// Your ES6 code</script>

上面代码中，browser.js是Babel提供的转换器脚本，可以在浏览器运行。用户的ES6脚本放在script标签之中，但是要注明type="text/babel"。

2.可以使用babel-standalone模块提供的浏览器版本，将其插入网页。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script><script type="text/babel">// Your ES6 code</script>

注意，网页实时将 ES6 代码转为 ES5，对性能会有影响。生产环境需要加载已经转码完成的脚本。

下面是如何将代码打包成浏览器可以使用的脚本，以Babel配合Browserify为例。首先，安装babelify模块。

$ npm install --save-dev babelify babel-preset-latest

然后，再用命令行转换 ES6 脚本。

$  browserify script.js -o bundle.js \  -t [ babelify --presets [ latest ] ]

上面代码将 ES6 脚本script.js，转为bundle.js，浏览器直接加载后者就可以了。

在package.json设置下面的代码，就不用每次命令行都输入参数了。

{  "browserify": {    "transform": [["babelify", { "presets": ["latest"] }]]  }}

3.在Github上发现的开源项目 https://github.com/baixuexiyang/babel-browser

通过ajax请求加载文件，在将文件内容通过babel编译，但是babel只能编译es6的语法，新的api并不会编译，所以需要借助babel-polyfill进一步编译，但是babel-polyfill并不会编译require和import，我封装了一个方法来实现require加载文件，进而将整个es6文件在线编译为es5运行。

babel-browser是在线编译，运行起来会很慢，所以只能在开发环境，那线上怎么处理呢？

我们通过babel将es6文件编译成es5，线上直接用es5代码，下面的demo给了一个完整的线上和线下的示例：

https://github.com/baixuexiyang/es6-demo

如何引入文件？

1、可以将文件下载到本地

git clone https://github.com/baixuexiyang/babel-browser.git

2、可以使用cdn

https://unpkg.com/babel-browser-king@1.0.2/babel-browser.min.js

3、也可以npm安装

npm install babel-browser-king

如何使用？

<script src="https://unpkg.com/babel-browser-king@1.0.2/babel-browser.min.js"></script>   <script>       require.config({           path: '/jsdev'  //es6文件的根目录       });   </script>   <script type="text/babel">       let test = 1;   </script>   <script type="text/babel" src="test.js"></script>

require或者import加载文件只能是相对地址
script标签的type属性值只能是text/babel

内容来源：https://blog.csdn.net/weixin_41791279/article/details/86610196