在开发或者测试的时候，你不需要每次都去编译 js .. 我们可以让代码直接在浏览器上被实时的编译 .. 这就需要使用两个 js 文件 .. 在项目的下面，创建一个 html 文件 .. 命名为 index.html .. 添加一个其它的 html 结构 .. 然后去链接几个 js 文件 ..

首先需要用的是 babel-core 里的 browser.js .. 这个文件是在 node_modules/babel-core/ 的下面 .. 名字是 browser.js .. 复制一下，再去链接一个 Babel 提供的 polyfill ，polyfill 就是修补浏览器功能的东西，比如浏览器暂时还不支持某个功能，你可以用一个对应的 polyfill ，让浏览器支持这个功能。

这个文件的位置仍然是 node_modules/babel-core 的下面， 文件名是 browser-polyfill.js .. 现在我们就可以直接让浏览器实时的去编译需要的 js 了。 不过还需要点特别的东西 ..

比如我们去把 script.js 这个文件链接过来 .. 在这个 script 标签的上面，添加一个 type 属性 .. 它的值设置成 text/babel .. 这样这个文件里的内容会被 browser.js 解释成浏览器能懂的东西 .. 你也可以使用同样式方法，去处理 JSX .. 以后我们介绍 React 的时候，会介绍到 JSX 。

再看一下 script.js ， 这个文件里，使用 let 这个关键词去添加两个变量 ，这个 let 是 es6 里新添加的一个关键词 .. 一个叫 fruits .. 它的值是一个数组 .. 里面有一个苹果 ，还有一个梨 .. 再定义一个变量 .. 名字是 foods .. 它的值也是一个数组 .. 在这里面用一个 spread 操作符 .. 这个操作符也是 es6 里的新东西 .. 在这里它的功能就是把 fruits 分解开 .. 然后放到这个 foods 数组里 ..

下面再去 foods 里的东西显示在页面上 .. document.body.innerText 设置一下 body 标签里的文字 .. 等于 foods.toString() ..

再把 foods 也输出到控制台上看一下 .. console.log .. foods ..

用 browser-sync 为项目创建一个服务器 ..

打开浏览器以后 .. 在页面上你会看到在 foods 里面的东西 .. 在控制台上你也能看到 ..

说明浏览器现在能明白这个 ...操作符 .. 这里，如果我把 script.js 后面的 type="text/babel" 去掉 .. 控制台上会显示一个 SyntaxError ，Unexpected token ...

加上这个 type="text/babel" .. 我们在页面上链接的 browser.js 就会去在浏览器上实时的编译这个 js 文件 ..