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

发布时间:2017-7-9 7:14:58编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"搭建es6开发与非开发环境babel-browser ",主要涉及到搭建es6开发与非开发环境babel-browser 方面的内容,对于搭建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

如何引入文件?

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

文件地址

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


上一篇:weblogic 部署问题定位与解决
下一篇:C# Winform将控件作为参数传递

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款