2.创建项目-配置babel

本文解析了为何在Node项目中需配置Babel,因部分浏览器不支持ES6语法,Babel能将其转换为ES5以确保兼容性。介绍了如何在项目中配置Babel,包括安装和设置.babelrc文件,以及使用babel-register运行ES6语法。

为什么一定要配置babel?
Node项目对es6的完美支持,因此在项目中要使用es6语法。但目前有些浏览器不支持es6语法,babel可以帮助我们将es6语法转换成es5语法运行。Node支持commonjs的es5的语法规范,不支持es6,我们使用babel转换一下就可以了
如果不在项目中配置babel,运行app.js文件会报以下错误
在这里插入图片描述
报错信息
在这里插入图片描述
在node.js项目中不使用babel,是不能使用es6等高阶语法

借助第三方类库babel,将高阶语法转换成能够运行的低阶语法的

  1. 配置转换环境,在education项目中新建.babelrc文件
    在这里插入图片描述
  2. 在.babelrc文件中手动配置一个如下对象(默认配置)
    在这里插入图片描述
    Babel把所有的配置都集成到env里面了,所以把babel预设置为env,,所有的转化都会遵循这个里面配置的规则。
  3. 安装babel ,因为发布到线上时,不需要使用babel,所有安装成开发依赖就行了,安装命令如下:npm install babel-preset-env - -save-dev(开发环境中需要,生产环境中不需要)
    在这里插入图片描述
  4. 出现版本号,表示安装成功
    在这里插入图片描述
  5. 生产依赖 和 开发依赖
    在这里插入图片描述
  6. 安装babel-register,可以理解为一个小插件,将es6的东西转换成es5.安装命令:npm install babel-register - -save-dev
    在这里插入图片描述
  7. 显示版本号,说明安装成功
    在这里插入图片描述
  8. 此时package.json中的显示已安装的的插件
    在这里插入图片描述
  9. 配置成功,可以使用es6等高阶语法了!
  10. 在education项目中新建src文件夹,将app.js文件放置src文件中。对外不再使用app.js进行暴露。根目录下新建main.js文件。现在项目目录如下
    在这里插入图片描述
  11. 编写main.js文件,在main.js文件中引入babel-register文件,引入src文件下的app.js文件。运行的时候就运行main.js.此时main.js通过引入的babel-register插件转换src下的app.js文件中的语法
    在这里插入图片描述
  12. 改变package.json文件,运行main.js文件,而不是app.js.
    修改前:
    在这里插入图片描述
    修改后:
    在这里插入图片描述
  13. 现在可以通过两种方式运行项目 一:node main.js 二 npm run dev
    在这里插入图片描述
    在这里插入图片描述
  14. 运行es6语法不再报错,说明babel可以正常使用啦
    在这里插入图片描述
    后面在项目中可以放心使用的es6等高阶语法了
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值