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

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

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

相关文章: