搭建es6开发与非开发环境babel-browser

前言

最近打算把es6应用到项目中，可是如何在开发环境（浏览器端）直接运行es6？es6已经发布一段时间了，如今大部分是在node.js环境运行，或者经过babel编译以后运行。babel-browser主要实现用户可以在浏览器上直接运行es6语法。

实现原理

经过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

如何引入文件？

一、能够将文件下载到本地

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

 

二、能够使用cdn

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

 

三、也能够npm安装

npm install babel-browser-king

 

如何使用？

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

注意事项

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

文件地址

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