Babel的安装和使用

安装Node.JS 和 npm,如未安装可参照其他文章

1.创建一个package.json

npm init (回车, 一直下一步即可)

安装 Babel

npm install --save-dev babel-cli
测试是否安装成功
./node_modules/.bin/babel --help  查看帮助

安装ECMAScript6/2015 (ES6/ES2015)

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

在项目根目录创建 .babelrc 配置文件

{
  "presets": ["latest"]
  //或者,二选一
  "presets": ["es2015"]
}

配置完成后, babel可以把我们es6的语法转换成es5的语法

新建一个main.js文件

在 main.js 内写入一下es6的代码
    var fn = (a,b) => a + b;

终端执行

./node_modules/.bin/babel main.js(编译的文件)

执行完成可以在终端看到转换后的代码

从Babel 6.0开始, 不再直接提供浏览器版本, 而是要用构建工具构建出来. 如果你没有或不想使用构建工具, 可以通过安装5.x版本的babel-core 模块获取

1-安装

npm install babel-core@5

2-编写测试文件

在跟目录新建一个html文件, 比如 index.html 

引入 browser.js 和 browser-polyfill.js 两个文件, 这两个是必须引入的问题件

<script src="./node_modules/babel-core/browser.js" type="text/javascript"></script>
<script src="./node_modules/babel-core/browser-polyfill.js" type="text/javascript"></script>

注意: browser.js 是 Babel 提供的转换器脚本, 在引入我们编写的es6的文件时, script 标签的 type 需要是 "text/babel"

<script type="text/babel" src="./main.js"></script> 

browser-sync start --server

加载该模块
npm install -g browser-sync

( 需要替换路径中的yourname )
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/yourname

{
  "plugins": [],
  "presets": ["latest"]
  //或者,二选一
  "presets": ["es2015"]
}
package.js 添加， 然后打包 npm run build

Babel的安装和使用

原文：https://www.cnblogs.com/zhaofeis/p/10621249.html