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

{

"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中的配置为准

{

"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中配置为例。

{

"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

babel安装及使用相关推荐

ES6代码转ES5教程(babel安装使用教程)
需要用到的软件 Node.js + babel Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行.这意味着,你可以用 ES6 的方式编写程 ...
babel安装失败/报错详细解决方案报以下错误： core-js@2.6.12: core-js@＜3.23.3 is no longer maintained and not recommended
babel安装失败/报错详细解决方案 **问题:**在VSCode中执行命令 npm install --global babel-cli 报以下错误: core-js@2.6.12: core-js ...
babel安装后无法使用：babel : 无法加载文件 C:\Users\DZG\AppData\Roaming\npm\babel.ps1
Babel转码器,安装后无法使用使用命令babel --version,查看版本报错 babel : 无法加载文件 C:\Users\DZG\AppData\Roaming\npm\babel.ps ...
Js逆向教程22-AST 抽象语法树babel安装
作者:虚坏叔叔博客:https://xuhss.com 早餐店不会开到晚上,想吃的人早就来了!
使用npm安装babel步骤
测试是否已经安装了npm 在cmd中输入npm -v 没有安装可以自行安装使用vscode ctrl+j 打开vscode自带终端进入目标文件夹[使用cd命令] 自带终端中输入npm init 一 ...
React从入门到精通系列之(1)安装React
一.安装React React是灵活的,可以在各种类型的项目中使用. 你可以使用它创建一个全新的应用程序,也可以逐步将其引入现有的项目中,而不需要重写整个项目. 创建一个单页面应用 Create Re ...
react入门--------安装react
创建一个单页面应用 Create React App是开始构建新的React单页应用程序的最佳方式. 它可以帮助您快速集成您的开发环境,以便您可以使用最新的JavaScript功能,它提供了一个很好的 ...
React文档（一）安装
React是一个灵活的可以用于各种不同项目的框架,你可以用它来写新应用,你也可以逐步将它引进已有的代码库而不用重写整个项目. 试用React 如果你想玩一玩React,那么就去CodePen上试一试. ...
@babel/polyfill按需加载
为什么要用polyfill babel帮我们编译es6语法,但是像Promise.async.await...这些语法是编译不了的,那么我们就得用到polyfill了. 安装及配置 npm i @ba ...

babel安装及使用

babel安装及使用相关推荐

最新文章

热门文章