babel安装及使用

参考文档：

http://www.ruanyifeng.com/blog/2016/01/babel.html

下边两个是内容一样

https://blog.csdn.net/huangzhaoyang8888/article/details/80705363

https://zhuanlan.zhihu.com/p/28143410

前提:安装好node环境

第一步：

在本地项目路径下npm init，之后会生成一个package.json文件

第二步：

之后再执行

本地安装babel命令行工具 -- 每个项目安装一个，尽量不要在全局安装一个babel。

npm install --save-dev babel-cli

如果你已经全局安装了babel，可以使用如下的命令进行卸载

npm uninstall --global babel-cli

执行完以后，package.json的显示内容

 

第三步：在命令行中调用babel

下边两种方式，选择一种。推荐第一种

本地安装的babel是不能够在直接命令行中运行的，为了在命令行中运行babel，我们有两个方法，1是需要配置下package.json文件的scripts项。比如如下代码，配置了一个build命令，运行该命令(npm run build)的时候就会在命令行执行babel src -d lib

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

{   "name": "es6",   "version": "1.0.0",   "description": "",   "main": "arrow.js",   "scripts": {     "build": "babel src -d lib"   },   "keywords": [],   "author": "",   "license": "ISC",   "devDependencies": {     "babel-cli": "^6.24.1"   } }

　　效果：

第2个方法是你需要可以进入node_modules文件夹，再进入.bin文件夹，然后执行在命令行中执行babel src -d lib。

推荐使用npm run build的方法。

这里需要解释babel src -d lib这个命令的意思。这个命令目的是把src文件夹下的文件都转译，转译后的文件放到lib目录下。

关于babel的命令行使用方法请点这里

ps:此时无论你是运行npm run build 还是运行babel src -d lib命令（其实两个方法本质上都是一样的，都是运行babel src -d lib）命令行都会报错，原因是现在还没有src文件夹。可以先不用管它，稍后我们再新建src文件夹。

 

第四部：创建.babelrc配置文件 

在cmd中键入以下命令。

1	D:\webpack\demo\es6>type nul>.babelrc

这个时候你的文件夹里就多了一个.babelrc文件了。windows是不能直接创建空文件名的文件的，所以必须通过命令行创建。

 

 

第五步：

安装babel的转译器

这里我们以babel-preset-env为例。

在命令行中执行如下代码就会安装babel-preset-env转译器。

1	D:\webpack\demo\es6>npm install  --save-dev babel-preset-env

注意：babel命令行工具（babel-cli）跟babel转译器是两个不同的东西，命令行工具并不具有转译代码的功能，只是为了在命令行中使用babel。要转码必须安装转译器，比如babel-preset-env转译器或者babel-preset-react转译器。要转译的时候，还要在.babelrc文件或者命令行中配置这些转译器(presets)选项

 效果：

 

第六步：配置.babelrc文件

.babelrc用于配置除回调以外的所有babel api 选项。例如plugins和presets。plugins用于配置我们转译所需要的插件，presets用于配置我们所需要的转译器。

.babelrc不是必须的，我们在.babelrc中配置的选项都可以通过命令行添加，比如在命令行执行 babel src -d lib --presets=env 等价于在.babelrc中配置 "presets":["env"]。当然.babelrc要明显方便很多。

babel在转译代码的过程中会自动读取当前目录.babelrc配置文件，如果当前目录没有的话就遍历整个目录树去寻找，直到找到.babelrc文件或者含有"babel"字段的package.json文件，然后使用这些配置选项来转译代码。

关于.babelrc的注意点如下。

1、如果没有.babelrc文件，或者没有在其他文件中设置过babel的presets的配置选型，并且命令行中也没有配置--presets，那么代码是不会转译的。原es6代码什么样，转译后的代码还是什么样。

2、如果你的.babelrc或者你的命令行使用了你没有安装的转译器（presets），代码就会报错

3、但.babelrc中的配置跟你在命令行中使用的配置冲突的时候，以.babelrc中的配置为准

1 2 3

{     "presets":["env"] }

　　

关于.babelrc文件的更多使用方法请点击这里

 

安装其他的依赖：

 

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

 

然后，将这些规则加入.babelrc。

  {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

 效果：

package.json里边的 

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1"
  }

这些是，用 npm下载完依赖后自动生成的。不用管

 

第七步：（这一步不算新增的，相当于是替换下第四步的操作）

配置文件可以不创建可以用其他方式替换：
 

.babelrc的替代方案

如果你不想生成.babelrc文件，你可以在你的package.json文件中对babel进行配置。如果你使用gulp或者webpack之类的管理工具的话，也可以在这里工具的配置选项里添加babel的配置选项。

以下以在package.json中配置为例。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

{   "name": "es6",   "version": "1.0.0",   "description": "",   "main": "arrow.js",   "scripts": {     "build": "babel src -d lib --comments=true"   },   "babel":{     //babel选项     "presets":["es2015"],     "comments":false   },   "keywords": [],   "author": "",   "license": "ISC",   "devDependencies": {     "babel-cli": "^6.24.1",     "babel-loader": "^7.1.1",     "babel-preset-env": "^1.6.0",     "babel-preset-es2015": "^6.24.1",     "babel-preset-react": "^6.24.1",     "webpack": "^3.2.0"   } }​

　　

在package.json中配置babel等同于使用.babelrc文件

 效果：

babel的配置需要手动自己加入。

json文件中不可以有注释

第八步：

编写es6代码

因为我们使用的babel命令是babel src -d lib 所以我们需要在目录中创建一个叫src的文件夹。目录结构如下：

 npm run build 

 会在lib文件夹中生成export.js文件

 

注意：

对于 export default {} 支持不好，还得加个插件 babel-plugin-add-module-exports：
"plugins": [
"add-module-exports"
]

命令：npm install babel-plugin-add-module-exports --save-dev

 

import.js中的代码：

import {bar,foo, fn0, fn1} from "./export.js";
console.log(bar+"_"+foo);
        fn0();
        fn1();

export.js中代码：

let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
    console.log("fn0");
};
let fn1 = function() {
    console.log("fn1");
};
export{ bar , foo, fn0, fn1}

 

import.html中代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./lib/import.js">
    </script>
</body>
</html>

我从中遇到的问题：

https://blog.csdn.net/zhangshab/article/details/83714288