babel安装

时间 2019-11-14

标签 babel 安装繁體版

原文原文链接

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

babel安装

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

npm install -g babel

可是通常都不会安装成功，由于如今默认安装的是babel6 因此这个命令不会成功。node

如今使用es6的安装方法：安装babel-core和babel-clireact

npm install babel-cli -g

npm install babel-core --save-dev

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

通常安装成功的话会有一大堆显示出来，如果只有四、5行抱歉安装失败了。这个通常都是你的网速不行，能够换个git

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语法，须要手动加载相关插件。es6

如今安装babel的预编译文件web

本身新建一个文件夹shell

在文件下用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/