babel安装

大家都知道目前ＥＳ６不是浏览器全部都是支持的，所以要通过转码器先进行转码然后再编译代码。小心在学习ＥＳ６之前先安装了ｂａｂｅｌ转码器，虽然当时安装的时候困难重重，遗憾的是没有把解决方案总结一下，别人询问的时候又要重新查一次，汗！！废话不多说了。。。。。。

babel安装

如果你还没安装 Babel 可以使用 npm （用ｃｍｄ或者是git bash）来安装：

npm install -g babel

 

但是一般都不会安装成功，因为现在默认安装的是babel6 所以这个命令不会成功。

现在使用es6的安装方法：安装babel-core和babel-cli

npm install babel-cli -g
npm install babel-core --save-dev

使用babel --help 查看是否已经安装好了：没有安装成功一般都会提示安装，这个时候建议换一个网速快的地方

一般安装成功的话会有一大堆显示出来，若是只有4、5行抱歉安装失败了。这个一般都是你的网速不行，可以换个

babel5 和 babel6 的区别

对于Babel来说，现在有了两个版本，一个是5，一个是6，那么两者有什么区别呢？

  • 5对新手更加友好，因为只需要安装一个babel就可以了，而6需要安装比较多的东西和插件才可以。
  • 相比5来说，6将命令行工具和API分开来了，最直观的感觉就是，当你想在代码中运行es6代码的话，需要安装babel-core，而如果你想在终端编译es6或者是运行es6版本的REPL的话，需要安装babel-cli
  • 也许有人问，原先的babel去哪了？是这样的，这个babel的package到了6版本之后虽然还是能安装，但是已经不具有任何的有效的代码了。取而代之的是一段提示文字，提示你需要安装babel-core或者babel-cli。所以你在babel6的情况下，完全不需要安装babel
  • 6将babel插件化，当你第一次安装babel-core并且按照以前的方式来加载require hook的话，你回发现代码无法运行： 
    require('babel-core/register');

就是因为babel6整体插件化了，如果你想使用es6语法，需要手动加载相关插件。

现在安装babel的预编译文件

自己新建一个文件夹

在文件下用git bash打开或者是cmd跳到当前文件夹下面

使用命令：
npm install babel-preset-es2015
npm install babel-preset-react
npm install babel-preset-stage-1

这时你会看到你的文件夹下面多了node_modules文件夹

接着写它的配置文件.babelrc（与node_modules在同一目录下）

因为这个文件是没有命名的，所以要通过cmd创建文件命令：

fsutil file createnew d:\.babelrc 1000

这样babel就可以使用了，可以自己创建一个js文件使用babel-node等命令测试一下

 

在git bash 上运行babel慢的要命，作为一个程序员是极度无法容忍的，所以推荐使用webstrom安装插件使用或者是在sublime中配置编译环境使用

创建Sublime Text编译系统

选择菜单Tools –> Build System –> new Build System…

中文版的话是工具 –> 编译系统 –> 新建编译系统…

然后写如下配置：

{
    "working_dir": "${project_path:${folder}}",
    "selector": "source.js",
    "encoding": "utf-8",
    "shell": true,
    "windows": {
        "cmd": ["taskkill /f /im node.exe >nul 2>nul & babel-node $file"]
    },
    "osx": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node $file"]
    },
    "linux": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node $file"]
    }
}

 

  

接着保存为javascript.sublime-build，保存位置默认即可。

 

webstrom 默认使用babel

http://blog.drawable.de/2015/02/27/es6-in-webstorm-9-setting-up-a-filewatcher/

 

posted @ 2016-05-11 16:33  珍真小心  阅读(18845)  评论(2)  编辑  收藏  举报