搭建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

相关文章
|
5月前
|
前端开发 JavaScript 程序员
【Vue3+TypeScript】CRM系统项目搭建之 — 区分 development 和 production 环境
【Vue3+TypeScript】CRM系统项目搭建之 — 区分 development 和 production 环境
59 0
|
6月前
|
JavaScript Shell 开发者
怎样使用Nest.js快速构建高效Node.js应用?
这篇博客介绍了Nest.js,一个基于TypeScript的Node.js框架,适用于构建可维护和可扩展的服务器端应用。文章引导读者快速入门,包括安装Node.js和Nest.js CLI,创建新项目,安装依赖以及启动开发服务器。通过访问`http://localhost:3000`,可以看到&quot;Hello World!&quot;,证明应用已成功运行。Nest.js因其模块化架构和强大的功能,成为现代Web开发的热门选择。
|
7月前
|
JavaScript 前端开发
koa开发实践1:基于 gulp 搭建 typescript 自动构建环境
koa开发实践1:基于 gulp 搭建 typescript 自动构建环境
189 0
|
JavaScript API 开发者
为依赖Angular.js的上古项目给VSCode编写$scope定义跳转扩展插件
虽然Angular.js停止更新已经一年了,但依赖它的上古时代的项目并不少。由于都是使用js开发,很难为其提供很好的维护,所以直到今天开发维护也并不愉快。可以说没有开发插件的支持,再成熟老练的框架都发挥困难。
175 0
为依赖Angular.js的上古项目给VSCode编写$scope定义跳转扩展插件
|
SQL JavaScript 关系型数据库
保姆级教程——号称下一代Node.js,Typescript的orm的prisma 如何在nest.js中使用
保姆级教程——号称下一代Node.js,Typescript的orm的prisma 如何在nest.js中使用
|
JSON JavaScript 前端开发
JXcore 打包在企业级项目里的合理运用和模块系统以及网络的配置详解【node.js】
JXcore 打包在企业级项目里的合理运用和模块系统以及网络的配置详解【node.js】
JXcore 打包在企业级项目里的合理运用和模块系统以及网络的配置详解【node.js】
|
前端开发 测试技术 API
开发 Babel 插件可以试试这个 CLI 工具
大家好,我是小鑫同学。一位从事过Android开发、混合开发,现在长期从事前端开发的编程爱好者,我觉得在编程之路上最重要的是知识的分享,所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识,欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~
290 0
|
JavaScript 前端开发
nodejs ES6模块使用 以及 ES6代码转CJS兼容性处理
nodejs ES6模块使用 以及 ES6代码转CJS兼容性处理
nodejs ES6模块使用 以及 ES6代码转CJS兼容性处理
|
JavaScript 网络架构 索引
JS 高级(六)ES6的特性与功能
JS 高级(六)ES6的特性与功能
174 0
JS 高级(六)ES6的特性与功能
|
JavaScript 前端开发 测试技术
UMI+DVA根据开发环境和生产环境不同动态加载变量
你有没有遇到过这样的情况!比如你们有四种(或更多)环境:开发环境(本地调式代码环境)、测试环境(脏数据环境)、预生产环境(无限接近生产环境)、生产环境(正式环境或线上环境)等等环境。而对于不同环境你的静态资源host地址或者你的用户id等等可能是不一样的
UMI+DVA根据开发环境和生产环境不同动态加载变量