【Es6入门踩坑记】01用Babel把ES6编译成ES5

写在前言:ECMAScript和 JavaScript 的关系
前者是后者的规格,后者是前者的一种实现

  • 虽然现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6语法 这就需要我们把ES6的语法自动转为ES5的语法。
  • 下面我会使用Babel把ES6编译成ES5.

Babel ( babeljs.io/)是 一个广为使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码
Babel 配置文件是 .babelrc ,存放在项目的根目录下。

在这里插入图片描述
建立两个文件夹

  • src
  • dist

在src目录下建立两个文件

  • index.js
  • index.html

在这里插入图片描述
在这里插入图片描述
用快捷键Ctrl+波浪线(~)打开终端

输入如下命令对文件进行初始化,根目录会出现package.json文件夹

npm init -y

在这里插入图片描述
在这里插入图片描述
在终端输入如下命令安装一个可转换的Bebal

npm install -g babel-cli
  • -g表示全局安装

接下来我们在终端输入以下命令

baber src/index.js -o dist/index.js
  • -o表示输出

此时它提示我们出错啦

接下来我们输入如下命令

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

安装成功之后在src建配置文件:.babelrc

  • Babel 配置文件是 .babelrc ,存放在项目的根目录下。使用 Babel 的第 1 步就是配置这 个文件。
  • 该文件用来设置转码规则和插件。
    在这里插入图片描述
    之后我们在终端输入
bebal src/index.js -o dist/index.js

会发现依旧是失败的

接下来我们修改package.json文件
在这里插入图片描述
替换之后的代码如蓝色方框
在这里插入图片描述
接下来我们在终端输入

npm run build

在这里插入图片描述
我们可以在终端看见在dist文件夹下成功生成了index.js文件

现在我们来看看index.js文件的内容
在这里插入图片描述
可以发现已经转换成功了

你get到没?!!

记得点赞嘻嘻

发布了227 篇原创文章 · 获赞 41 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_42554191/article/details/104482988
今日推荐