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

简介: 前言 最近打算把es6应用到项目中,但是如何在开发环境(浏览器端)直接运行es6?es6已经发布一段时间了,现在大部分是在node.js环境运行,或者通过babel编译之后运行。babel-browser主要实现用户能够在浏览器上直接运行es6语法。

前言

最近打算把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

 

相关文章
|
3月前
|
JavaScript 前端开发
如何在项目中集成 Babel?
如何在项目中集成 Babel?
61 3
|
7月前
|
JavaScript 前端开发
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
node.js 导入导出模块(CommonJS模块化规范,ES6模块化规范)
79 1
|
7月前
|
前端开发 JavaScript 程序员
【Vue3+TypeScript】CRM系统项目搭建之 — 区分 development 和 production 环境
【Vue3+TypeScript】CRM系统项目搭建之 — 区分 development 和 production 环境
75 0
|
JavaScript 编译器
Babel对ES6模块化代码转换、ES6模块化引入NPM包
Babel对ES6模块化代码转换、ES6模块化引入NPM包
104 0
|
自然语言处理 前端开发 JavaScript
Babel 的工作原理以及怎么写一个 Babel 插件
Babel 的工作原理以及怎么写一个 Babel 插件
229 0
|
9月前
|
JavaScript IDE 编译器
TypeScript中模块路径解析与配置:深入剖析与最佳实践
【4月更文挑战第23天】本文深入探讨了TypeScript中模块路径解析的原理与配置优化,包括相对路径、Node.js模块解析和路径别名。通过配置`baseUrl`、`paths`、`rootDirs`以及避免裸模块名,可以提升开发效率和代码质量。建议使用路径别名增强代码可读性,保持路径结构一致性,并利用IDE插件辅助开发。正确配置能有效降低维护成本,构建高效可维护的代码库。
|
9月前
|
JavaScript 前端开发
koa开发实践1:基于 gulp 搭建 typescript 自动构建环境
koa开发实践1:基于 gulp 搭建 typescript 自动构建环境
207 0
|
JavaScript API 开发者
为依赖Angular.js的上古项目给VSCode编写$scope定义跳转扩展插件
虽然Angular.js停止更新已经一年了,但依赖它的上古时代的项目并不少。由于都是使用js开发,很难为其提供很好的维护,所以直到今天开发维护也并不愉快。可以说没有开发插件的支持,再成熟老练的框架都发挥困难。
197 0
为依赖Angular.js的上古项目给VSCode编写$scope定义跳转扩展插件
|
JavaScript 前端开发 Go
esbuild 配置开发环境
esbuild 相信在使用过vite的同学都知道,vite是开发环境使用的是esbuild来进行编译代码的,生成环境打包使用的是rollup,想看rollup的同学,可以查看我的往期文章。(实战 rollup 第一节入门) (rollup 实战第二节 搭建开发环境)(rollup 实战第二节 搭建开发环境)
esbuild 配置开发环境
|
JSON JavaScript 前端开发
JXcore 打包在企业级项目里的合理运用和模块系统以及网络的配置详解【node.js】
JXcore 打包在企业级项目里的合理运用和模块系统以及网络的配置详解【node.js】
JXcore 打包在企业级项目里的合理运用和模块系统以及网络的配置详解【node.js】