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

相关文章
|
4月前
|
前端开发 JavaScript 程序员
【Vue3+TypeScript】CRM系统项目搭建之 — 区分 development 和 production 环境
【Vue3+TypeScript】CRM系统项目搭建之 — 区分 development 和 production 环境
49 0
|
6月前
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
146 0
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
|
JavaScript 编译器
Babel对ES6模块化代码转换、ES6模块化引入NPM包
Babel对ES6模块化代码转换、ES6模块化引入NPM包
95 0
|
SQL JavaScript 关系型数据库
号称下一代Node.js,Typescript以及go的orm的prisma 浅谈如何在nest.js中使用
号称下一代Node.js,Typescript以及go的orm的prisma 浅谈如何在nest.js中使用
号称下一代Node.js,Typescript以及go的orm的prisma 浅谈如何在nest.js中使用
|
6月前
|
JavaScript 前端开发
koa开发实践1:基于 gulp 搭建 typescript 自动构建环境
koa开发实践1:基于 gulp 搭建 typescript 自动构建环境
175 0
|
SQL JavaScript 关系型数据库
保姆级教程——号称下一代Node.js,Typescript的orm的prisma 如何在nest.js中使用
保姆级教程——号称下一代Node.js,Typescript的orm的prisma 如何在nest.js中使用
|
JSON 小程序 前端开发
小程序引入第三方插件Vant和小程序WeUl组件库
现如今前端的技术再向框架化的发展,框架的使用提高我们的编码的效率和性能的优化,同样CSS样式也是越来越高的要求,今天我要向大家介绍的就是较火的前端UI框架Vant UI组件库
268 0
|
资源调度 JavaScript 前端开发
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」3. 资源模块
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」3. 资源模块
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」3. 资源模块
|
JavaScript 前端开发 Go
esbuild 配置开发环境
esbuild 相信在使用过vite的同学都知道,vite是开发环境使用的是esbuild来进行编译代码的,生成环境打包使用的是rollup,想看rollup的同学,可以查看我的往期文章。(实战 rollup 第一节入门) (rollup 实战第二节 搭建开发环境)(rollup 实战第二节 搭建开发环境)
esbuild 配置开发环境
|
前端开发 测试技术 API
开发 Babel 插件可以试试这个 CLI 工具
大家好,我是小鑫同学。一位从事过Android开发、混合开发,现在长期从事前端开发的编程爱好者,我觉得在编程之路上最重要的是知识的分享,所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识,欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~
279 0