1 Star 4 Fork 1

dony / 学习笔记

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
利用babel工具将es6代码转成es5.md 1.62 KB
Copy Edit Web IDE Raw Blame History

利用babel工具将es6代码转成es5

由于一些浏览器对ES6新特性的支持度不高,或者一些浏览器低版本的不兼容,想再浏览器上直接使用ES6的新特性就得借助工具来实现

Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码,所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

流程

1,新建工程文件夹这里起名叫做es6,然后在里面创建两个文件夹分别为src 、dist

2,在src目录下新建一个index.js文件,里面输入es6代码:

// index.js
let b = 1;
console.log(b);
const name = "dony"
console.log(name)

3,在根目录下执行命令

npm init

生成的package.json的内容如下:

{
  "name": "es6",
  "version": "1.0.0",
  "description": "es6转换es5",
  "main": "index.js",
  "scripts": {
    "build": "babel src --out-dir dist"
  },
  "keywords": [],
  "author": "dony",
  "license": ISC
}

4,全局安装babel工具

在终端输入如下命令:

npm install -g babel-cli

虽然已经安装了babel-cli,只是这样还不能成功进行转换,我们还需要安装转换包才能成功转换。

npm install --save-dev babel-preset-es2015 babel-cli

5,新建.babelrc

在项目根目录新建(.babelrc)文件输入如图所示代码:

//.babelrc
{
	"presets": [
		"es2015"
	],
	"plugins": []
}

6,转换

在终端输入命令:

npm run build

得到转化结果如下

'use strict';
var b = 1;
console.log(b);
var name = "dony";
console.log(name);

Comment ( 0 )

Sign in to post a comment

1
https://gitee.com/dony1122/note.git
git@gitee.com:dony1122/note.git
dony1122
note
学习笔记
master

Search