详解babel升级到7.X采坑总结

最近工作比较忙，有一段时间没有写前端玩了。今天试着搭一个项目，发现各种坑，以前用起来非常好的配置文件各种报错。排查后发现原来babel升级了一个大版本，已经到7.X了，这里我总结一下升级过程中踩到的坑。

Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
  at Function.Module._resolveFilename (module.js:547:15)
  at Function.Module._load (module.js:474:25)
  at Module.require (module.js:596:17)
  at require (internal/module.js:11:18)
  ....

没找到@babel/core，需要把babel-core卸载掉，从新安装@babel/core

npm un babel-core
npm i -D @babel/core
ERROR in ./src/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.
...

将babel-preset-*卸载,重新安装@babel/preset-*，并且修改 .babelrc中的 presets

比如我的

npm:
- babel-preset-env
+ @babel/preset-env
- babel-preset-react
+ @babel/preset-react
- babel-preset-stage-0

.babelrc:
- "presets": ["react", "env", "stage-0", "mobx"]
+ "presets": ["@babel/preset-react", "@babel/preset-env", "mobx"]

除了上述的preset，我还用了babel-preset-mobx

但是没找到 @babel/preset-mobx，从babel-preset-mobx git提交日志上看，作者已经支持了最新的babel。在之后的测试中，发现mobx的功能也能正常使用。

另外，stage-*已弃用

ERROR in ./src/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: this.setDynamic is not a function
  at PluginPass.pre
  ...

这次是插件了，一样把babel-plugin-*卸载，重新安装@babel/plugin-*

然后修改.babelrc文件

具体的包名可以在 npm仓库里找

最终文件

.babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-runtime"
  ]
}

package.json:

"devDependencies": {
  "@babel/core": "^7.1.0",
  "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
  "@babel/plugin-transform-runtime": "^7.1.0",
  "@babel/preset-env": "^7.1.0",
  "@babel/preset-react": "^7.0.0",
  "babel-loader": "^8.0.2"
  "babel-preset-mobx": "^2.0.0",
  ...
 },
 "dependencies": {
  "@babel/runtime": "^7.0.0",
  ...
 }

总结

这次升级，功能上有什么变化我就不在这里写了，大家可以自行搜索

总的来说，babel舍弃了以前的 babel-*-* 的命名方式，改成了@babel/*-*

修改依赖和.babelrc文件后就能正常启动项目了。

webpack不用修改（除非你是webpack 3.X 升webpack 4.X）

上面的只是我遇到的问题，如果还有其他问题，可以参考资料升级指南 Upgrade to Babel 7

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • babel之配置文件.babelrc入门详解

    babel之配置文件.babelrc入门详解

    介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 babel有提供专门的命令行工具方便转码,可以自行去了解 什么是Babel 官方解释,是下一代JavaScript 语法的编译器. 既然是下一代Javascript的标准,浏览器因版本的不同对此会有兼容性问题,JavaScript的新的方法都不能使用,但是目前我们在项目开发一直提倡使用最新的语法糖编写,不但能减少代码量,而且async,await等新特性还解决了回调

  • babel基本使用详解

    什么是babel? babel是一个强大的多用途js编译器 点击进入官网 安装babel npm install -g babel-cli npm install --save-dev babel-cli babel配置文件 通过.babelrc来表示 { "presets" : [ ], "plugins" : [ ] } presets用来存放一些预设 plugins用来存放一些插件 命令行的简单使用 我们可以通过 -o (--out-file) 参数来编译一个

  • 详解webpack运行Babel教程

    摘要:Babel是转码器,webpack是打包工具,它们应该如何一起使用呢? GitHub仓库: Fundebug/webpack-babel-tutorial ES6 + IE10 = 语法错误! test.js使用了ES6的 箭头函数 : setTimeout(() => { console.log("Hello, Fundebug!"); }, 100) 由于低版本的浏览器没有支持ES6语法,这就意味着代码会出错.例如,在IE 10浏览器中,会出现"语法错误&qu

  • webpack使用 babel-loader 转换 ES6代码示例

    webpack使用 babel-loader 转换 ES6代码示例

    本文介绍了webpack使用 babel-loader 转换 ES6代码示例,分享给大家,具体如下: 查询各个 loader的使用,可以在官网上查询.https://www.npmjs.com (一)安装 babel-loader,babel-core. 使用命令 npm install --save-dev babel-loader babel-core 因为ES6语法每年都在更新,因此,我们需要一定的规则去转换. npm install --save-dev babel-preset-lat

  • babel的使用及安装配置教程

    简介 babel是一个广泛使用的转码器,可以将ES6代码转化为ES5代码,从而在现有环境执行,这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持. 安装及配置 npm install babel-cli --save-dev 或者 cnpm install babel-cli --save-dev使用淘宝镜像安装会更快. 步骤:进入项目 ==>cnpm install babel-cli --save-dev 为什么不安装在全局 如果安装在全局,那意味着项目要运行,全局环境必须有

  • 详解webpack babel的配置

    Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: 使用基于JavvScript进行扩展语言,比如React的JSX: npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D 关于babel的使用 首先

  • JavaScript中ES6 Babel正确安装过程

    JavaScript中ES6 Babel正确安装过程

    本文介绍Babel6.x的安装过程~首先呢,可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题:安装Babel(命令行环境,针对Babel6.x版本) 1.首先安装babel-cli(用于在终端使用babel) npm install -g babel-cli 2.然后安装babel-preset-es2015插件 npm install --save babel-preset-es2015 注:Babel5版本默认包含各种转换插件,然而Babel6.x相

  • 详解webpack 配合babel 将es6转成es5 超简单实例

    今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈. 下面附上流程 创建个文件夹,初始化一下,首先全局安装webpack npm install webpack --save-dev 然后安装babel npm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader 在当前文件夹内执行安装,然后创建两个文件夹一个src作为源文件夹,一个bin,保

  • 详解如何使用babel进行es6文件的编译

    1.babel babel官方网址 2. 安装 npm i babel-cli -g 通过上面命令进行babel的安装,其中i表示安装install的意思, -g表示安装到全局 3.使用 创建文件es6.js let num = [1,2,3,4]; let plusDouble = num.map(item => item * 2); console.log(plusDouble); 然后使用命令进行编译: babel es6.js -o compiled.js 然后就会在当前目录下出现编译之

  • 详解babel升级到7.X采坑总结

    最近工作比较忙,有一段时间没有写前端玩了.今天试着搭一个项目,发现各种坑,以前用起来非常好的配置文件各种报错.排查后发现原来babel升级了一个大版本,已经到7.X了,这里我总结一下升级过程中踩到的坑. Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core')

  • 详解springboot整合ueditor踩过的坑

    有一天老板突然找我让我改富文本(一脸懵逼,不过也不能推啊默默地接下了),大家都知道现在的富文本视频功能都是只有上传链接的没有从本地上传这一说(就连现在的csdn的也是)于是我找了好多个,最终发现百度的ueditor可以. 经过几天的日夜,甚至牺牲了周末休息时间开始翻阅资料... 废话不多说,开始教程: 第一步: 去ue官网下载他的源码 第二步: 解压下载的源码(下载可能会慢,好像需要翻墙下载) 然后打开项目把源码拖进项目的resources/static中去 第三步 就是重点了 由于spring

  • 详解vscode使用git所遇到的坑

    今天给vscode配置git的时候,差点没把我送走,我在配置git项目的时候会,看了一个博客文章的教学,其中配置路径的方法如下 1. 在git bash 中使用 命令 : where git 的路径 2.然后按照上面的路径配置到 vscode下的Git:path中,如下 然后当我使用vscode的push命令时 就出现如下错误 我百度了很多篇解决办法的文章,千姿百态,结果还是一个样报这个错误, 后来我突然发现别人的路径明显不是ming64下的git.exe,这一次我抱着最后的希望更改了路径 如下

  • 详解Go语言中for range的"坑"

    前言 Go 中的for range组合可以和方便的实现对一个数组或切片进行遍历,但是在某些情况下使用for range时很可能就会被"坑",下面用一段代码来模拟下: func main() { arr1 := []int{1, 2, 3} arr2 := make([]*int, len(arr1)) for i, v := range arr1 { arr2[i] = &v } for _, v := range arr2 { fmt.Println(*v) } } 代码解析

  • 详解vue-socket.io使用教程与踩坑记录

    详解vue-socket.io使用教程与踩坑记录

    目录 前言 我遇到的问题 使用教程 安装 引入(main.js) 使用(Page.vue) 解决方案 结合connect事件+store+路由守卫实现拦截 请先允许我狠狠吐个槽:vue-socket.io相关中文博客实在太少太少,来来去去就那么几篇,教程也比较零散,版本也比较老,就算我有暴风式搜索还是找不到解决问题的方案,然后我怒了,开始看源码.写测试demo.几乎把相关的issues都看了一遍,折腾1天后终于...搞定了,下面总结一下~ 考虑到很多小伙伴看完文章还是一头雾水或者无法复现方案,附

  • 详解vue静态资源打包中的坑与解决方案

    本文主要解决 ①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题. 1.问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后,部署项目至特定路径下:如: //ip:port/public/springActivity/ 此时访问: http://ip:port/public/springActivity/index.html index.html 可以正常访问,但是引用

  • 详解项目升级到vue-cli3的正确姿势

    一. 原以为升级vue-cli3的路线是这样的: 创建vue-cli3项目,按原有项目的配置选好各项配置 迁移目录 src->src static->public 对比新旧 package.json ,然后 yarn install ,完毕. 然鹅... 运行项目,报错 You are using the runtime-only build of Vue...... : 然后去查了下旧项目的相关字眼文件: 噢,原来是vue-cli3的webpack相关文件都得自己写.于是乎根据官网的指引,在

  • 详解webpack4升级指南以及从webpack3.x迁移

    详解webpack4升级指南以及从webpack3.x迁移

    几天前webpack发布了新版本v4.0.0,其中做了很多改动,包括0配置以及移除了CommonsChunkPlugin等.由此而来的还有之前webpack3.x的项目如何迁移到新的webpack版本,本文就一个新的vue-cli创建的基于webpack的项目进行迁移. 题外话:不要看0配置是很有噱头,基本是不能满足大部分用户啊的需求,不过加入了更多的默认配置确实也方便了用户,配置相对简单,是一种开箱即用的方式.毕竟之前parcel的0配置确实抢了很多webpack的风头,然后也去弄了一下par

  • 详解CentOS升级Python2.6到Python2.7并安装pip

    现在大多数Centos6.x版本的系统python都是2.x,现因开发需求需要安装前端代码的构建工具glue,故必须要做python版本的升级 升级python 系统默认安装的python是2.6.6的,我们需要升级到Python2.7 wget https://www.python.org/ftp/python/2.7.12/Python-2.7.12.tar.xz tar xf Python-2.7.12.tar.xz cd Python-2.7.12 ./configure --enabl

  • 详解nvm管理多版本node踩坑

    Windows10 本机环境:win10 未安装node,安装了nvm工具,尝试使用nvm安装我开发环境的node版本(10.9.0 or later) 根据上面的截图看,应该是npm下载失败了,需要手动安装,我们使用命令查看node安装情况 nvm use 10.9.0 v10.9.0 node安装没问题,尝试安装单独的npm包的时候出问题了,上述的网站已经移植更改到 https://npm.community/ 然而这个网址很难打开,即使翻墙,github上也没有直接安装的包,暂时告一段落,

随机推荐