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

selfimpr 发布于2019-08-20 17:38 / 875人阅读

摘要：前言最近打算把应用到项目中，但是如何在开发环境浏览器端直接运行已经发布一段时间了，现在大部分是在环境运行，或者通过编译之后运行。主要实现用户能够在浏览器上直接运行语法。

前言

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

如何引入文件

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

如何使用

注意事项

require或者import加载文件只能是相对地址
script标签的type属性值只能是text/babel

文件地址

https://github.com/baixuexiya...

云服务器 GPU云服务器开发环境搭建搭建开发环境安卓开发环境搭建前端开发环境搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83737.html

ES6-开发环境搭建（1）

摘要：全局安装本地安装转码规则安装完成后，我们可以看一下我们的文件，已经多了选项。直接在线编译提供一个在线编译器，可以在线将代码转为代码。古语有云：君子生非异也，善假于物；工欲善其事，必先利其器。由于有些低版本的浏览器还是不支持ES6语法，学习ES6，首先要学会搭建一个基本的ES6开发环境，利用工具，把ES6的语法转变成ES5的语法。 1、使用Babel把ES6编译成ES5 1...

android_c 2019-08-23 15:21 评论0 收藏0
webpack 项目构建：（二）ES6 编译环境搭建

摘要：本质就是一个编译器，通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。在上一章 webpack 项目构建：（一）基本架构搭建我们搭建了一个最基本的 webpack 项目，现...

marser 2019-08-22 15:08 评论0 收藏0
搭建一个es6的开发环境

摘要：前提是你已经安装了手动创建一个工作目录以下是的内容在目录下创建一个这里写我们的代码接下来我们需要把语法编译成我们浏览器所识别的语法文件，那就用到我们的神奇在安装之前我们要先初始化一下项目全局安装输入以下命令此时文件中就有的依赖了你以 1.前提是你已经安装了node,npm2.手动创建一个工作目录 dist,src,index.html 以下是index.html的内容 ...

jcc 2019-08-22 13:50 评论0 收藏0
如何搭建es6开发环境

摘要：安装此过程没有难点，略过下载完成后可以通过和来查看是否安装成功以及版本后安装新建一个目录项目名称进入该项目，然后一路回车即可。 node.js安装此过程没有难点，略过下载完成后可以通过node -v和npm -v来查看是否安装成功以及版本后 webpack 安装新建一个目录(项目名称), 进入该项目，npm init, 然后一路回车即可。(会生成一个package.json...

OldPanda 2019-08-23 14:26 评论0 收藏0
webpack4 的开发环境配置说明

摘要：的开发环境配置说明完整的的配置地址开发环境的搭建，总体而言就比较轻松，因为用户就是开发者们。的做法是在的字段配置类似这样这样配置后，当运行时，在里通过可以取到值以来做判断就可以啦。 webpack4 的开发环境配置说明完整的webpack4的配置clone地址： https://github.com/ziwei3749/... 开发环境的搭建，总体而言就比较轻松，因为用户就是开发者们...

fancyLuo 2019-08-23 10:34 评论0 收藏0