Babel 也可以用于浏览器环境。但是,从 Babel 6.0 开始,不再直接提供浏览器版本,而是要用构建工具构建出来。如果你没有或不想使用构建工具

1.通过安装5.x版本的babel-core模块获取

$ npm install babel-core@old

运行上面的命令以后,就可以在当前目录的node_modules/babel-core/子目录里面,找到babel的浏览器版本browser.js(未精简)和browser.min.js(已精简)。

然后,将下面的代码插入网页。

<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

上面代码中,browser.js是Babel提供的转换器脚本,可以在浏览器运行。用户的ES6脚本放在script标签之中,但是要注明type="text/babel"

2.可以使用babel-standalone模块提供的浏览器版本,将其插入网页。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

注意,网页实时将 ES6 代码转为 ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本。

下面是如何将代码打包成浏览器可以使用的脚本,以Babel配合Browserify为例。首先,安装babelify模块。

$ npm install --save-dev babelify babel-preset-latest

然后,再用命令行转换 ES6 脚本。

$  browserify script.js -o bundle.js \
-t [ babelify --presets [ latest ] ]

上面代码将 ES6 脚本script.js,转为bundle.js,浏览器直接加载后者就可以了。

package.json设置下面的代码,就不用每次命令行都输入参数了。

{
"browserify": {
"transform": [["babelify", { "presets": ["latest"] }]]
}
}

3.在Github上发现的开源项目 https://github.com/baixuexiyang/babel-browser

通过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

如何使用?

<script src="https://unpkg.com/babel-browser-king@1.0.2/babel-browser.min.js"></script>
<script>
require.config({
path: '/jsdev' //es6文件的根目录
});
</script>
<script type="text/babel">
let test = 1;
</script>
<script type="text/babel" src="test.js"></script>

require或者import加载文件只能是相对地址 

script标签的type属性值只能是text/babel

Babel 在浏览器环境使用方法的更多相关文章

  1. Javascript的二进制数据处理学习 ——nodejs环境和浏览器环境分别分析

    以前用JavaScript主要是处理常规的数字.字符串.数组对象等数据,基本没有试过用JavaScript处理二进制数据块,最近的项目中涉及到这方面的东西,就花一段时间学了下这方面的API,在此总结一 ...

  2. Linux安装配置php环境的方法

    本文实例讲述了Linux安装配置php环境的方法.分享给大家供大家参考,具体如下: 1.获取安装文件: http://www.php.net/downloads.php php-5.3.8.tar.g ...

  3. Babel指南——基本环境搭建

    ECMAScript的现状 ECMAScript,本身是一个脚本语言的设计规范,基于此规范,有许多为人熟知的语言,如JavaScript.ActionScript等.而时至几年前,随着Node.js的 ...

  4. 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded

    在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...

  5. 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

    在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...

  6. this指向 - 浏览器环境

    1.全局上下文中的 this <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. 详解 Webpack+Babel+React 开发环境的搭建

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...

  8. 介绍几种搭建Dojo环境的方法

    Hello World! 的时间到了,在你所学过的众多语言中,哪个不是从此学起的呢?但在此之前,我们要先构建一个开发环境,如同刚开始学习Java的时候,还是需要我们先安装JDK.配置好环境变量等等,H ...

  9. webpack+babel+ES6+react环境搭建

    webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...

随机推荐

  1. dis反汇编查看实现

    dis库是python(默认的CPython)自带的一个库,可以用来分析字节码 >>> import dis >>> def add(a, b = 0): ... ...

  2. Redis 笔记(六)—— ZSET 常用命令

    常用命令 命令 用例和描述 ZADD ZADD key-name score member [score member ...] —— 将带有分值的成员添加到 HSET 中 ZREM ZREM key ...

  3. LeetCode 题解 | 面试题57 - II. 和为s的连续正数序列

    题目描述 面试题57 - II. 和为s的连续正数序列 难度简单37收藏分享切换为英文关注反馈 输入一个正整数 target ,输出所有和为 target 的连续正整数序列(至少含有两个数). 序列内 ...

  4. Ceph学习笔记(3)- Monitor

    Ceph学习笔记(3)- Monitor 前言: ​ Ceph将cluster map与placement rule合并为一张表称为crush map,作为集群表的一部分.由Monitor对集群表的副 ...

  5. spring05

    通过静态工厂的方法创建bean:和实例工厂方法: <?xml version="1.0" encoding="UTF-8"?> <beans ...

  6. centos7.3下安装nginx

    Nginx简介 Nginx是一款轻量级的Web服务器/反向代理服务器/电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行.其特点是占有内存少,并发能力强, Nginx的并发能力在 ...

  7. scala_spark实践2

    参考:jianshu.com/p/9d2d225c1951 监听socket获取数据,代码如下:这里使用nc -lk 9999 在ip为10.121.33.44的机器上发送消息 object Sock ...

  8. python2.7安装pip

  9. work of 1/6/2016

    part 组员                今日工作              工作耗时/h 明日计划 工作耗时/h    UI 冯晓云 UI动态布局改进和攻克疑难     6 继续下滑条等增删补减 ...

  10. B - How Many Equations Can You Find dfs

    Now give you an string which only contains 0, 1 ,2 ,3 ,4 ,5 ,6 ,7 ,8 ,9.You are asked to add the sig ...