前言
最近打算把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
如何引入文件?
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
如何使用?
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