koa2项目快速配置babel7

原创已于 2022-09-09 10:38:05 修改 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#babel7 #koa2 #es6 #babel

于 2019-01-23 16:37:01 首次发布

koa2 同时被 2 个专栏收录

3 篇文章

订阅专栏

babel

1 篇文章

订阅专栏

本文详细介绍了在Koa2项目中使用Babel7的原因及配置过程，包括解决版本冲突、配置.babelrc文件及安装必要插件，旨在帮助开发者顺利过渡到最新的Babel版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先简述为什么用babel7,在做koa2项目中，使用了es6的一些新的特性，而koa2对es6，甚至es7的支持并不是做到了完全兼容，所以我们需要引入babel来帮助我们完成这些工作。

babel的版本最新版本到7了，原来很多的项目大家可能都用的babel6，甚至babel5，以前用的时候都是在前端脚手架中自动配置好的babel，自己也没有过多的操心过，结果这koa2项目配babel的时候出了一堆莫名其妙的问题，首当其冲的就是版本问题，于是吃了很多苦头，看了很多博文，百度了很多资料，从babel5，到babel6，到babel7,一下子脑壳有点疼，没办法，不能被这点困难打倒啊，es6，es7，es8带来了很多新的，更完善的特性，因为怕麻烦去github拉一个已经完成的项目来改，这样子进步也只能是很慢的，于是咬咬牙，还是去看babel的官方文档吧。其实这个方法最省时间，效率也最高，而且脑壳不疼。（英文不好的同学可以用谷歌翻译插件），如果说原文是一首诗的话，那么大家写的博文则是每个人的翻译，一千篇博文就有一千种不同的思想掺杂在对babel的理解中，在此推荐大家有问题尽量找原文去自我揣摩。

首先来简介一下babel吧，babel是一个转码器，它由下面几个方面组合而成

配置文件.babelrc
{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}
它里面包括presets和plugins，分别是转码规则集合，和转码规则，这样子解释可以看出，plugins是定义的规则，而presets是一个规则的集合。plugins是对presets的补充和完善，上面这个文件presets为@babel/presets-env这个代表使用最新版本的规则库来转码，而plugins代表用@babel/plugins-transform-runtime来辅助转码，具体什么含义，参照babel中的解释

babel-cli,看到cli我们就能感觉到命令行的味道飘了过来，没错，这个是babel使用命令行工具额前提；
babel-node,由babel-cli提供的一个命令，可以在代码中使用，帮助我们编译代码；
babel-register,改写require的一个插件，可以提供实时转码功能；
babel-core 如果你的代码需要用babel的工具来转化；
babel-ployfill对ES6提供的API来转码，（babel默认只转化句法）；

欲练此功，必先自宫，其实上面那些记不记也无所谓，就权当了解一下了，网上的资料很多，我们来看重点，babel7,

babel7对babel6做了较多的改变。

1、我们将nodejs更新到较高版本；

2、配置.babelrc文件，babel7要求我们用配置文件来设置，不要像原来在package.json中设置，下图在babel官网中截取，别管那么多2015，2017什么的，直接上env，省事（react项目需要额外添加react的库）；

）

3、安装babel7的各类型插件，如果懂babel配置，可以按需写入，如果不懂还是都添加吧，不然版本可能报错，注意都得是7开头的版本，前面都会有@作为开始，具体原因，自行百度；

    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.0.0",
    "@babel/node": "^7.2.2",
    "@babel/runtime": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.3",

4、我们在部署的时候可能会报错，我这里用了babel-node命令，可是我忘记装@babel/cli了但是我的npm全局依赖里面有babel6，koa2执行代码的时候去我的全局npm安装包中找到了原来版本的babel6.23.0,这回导致莫名其妙的报错，可能报错，需要babel7的环境，如果不小心在本地项目中同时安装了babel的低版本库，还会报出缺少某个组件的错误，你顺势安装之后，这个错误会越来越多，安装不完的，这时候我们将node_module文件夹删掉，重新安装整个依赖项。我们可以通过npm list -g --depth 0 来确定全局环境(项目会先依赖项目环境，找不到再来全局找)；

5、将babel7全家都安装好之后应该就没问题了。

"scripts": {
    "dev": "./node_modules/.bin/nodemon bin/www --exec babel-node"
  },