根据官网https://www.npmjs.com/package/babel-loader要对应版本

一、babel7.X版本

  1.要安装的包

   第1套包:npm i babel-core babel-loader@7 babel-plugin-transform-runtime –D(千万记得是babel-loader@7,不是其他的)

    第2套包:npm I babel-preset-env babel-preset-stage-0 –D(注意是-零,不是字母o)  

   这里babel-loader一定要加版本号7,否则下载的将是最新版本8

  2.webpack.config.js配置文件中,rules节点的配置写法  

  { test: /\.js$/, use: 'babel-loader',exclude:/node_modules/},

  注意:

    ①虽然是2套包,但对于loader来说只有一个,所以urse属性只有一个loader。

    ②exclude是排除的意思。这个属性的意思就是不要去匹配node_modules目录中的文件。

    ③node_modules中的文件都已经是现成的包了,人家都打包好了,不需要我们再去打包。

    ④而且该目录中代码文件太多,排除掉它,也能提高很高的打包性能

  3.配置.babelrc文件  

    {

    “presets” : [“env”, “stage-0”],

    “plugins” : [“transform-runtime”]

    }

  注意:

    ①"presets"是用来配置处理“语法”的项。这2套包中,带有preset的包是babel-preset-env 和 babel-preset-stage-0 ,他们的名字分别是env/stage-0,前边的babel-preset是前缀。

    ②"plugins"是用来配置插件的项。这2套包中,只有babel-plugin-transform-runtime是插件,并且该插件的名字是“transform-runtime”

  二、使用babel8.X版本  

  先从大体上介绍一下babel8的变化点。

    第一,各个包的名字变了,都以@符号开头。这个变化带来2个影响。其一,以前每个包在node_modules目录下都是一个独立的文件夹;现在则在node-modules目录下有个叫“@babel”的目录,这里要安装的所有babel包,都在这个@babel目录下保存。其二,在配置的时候,写法完全变了。

    第二,有一些包被彻底废弃。比如在babel7.X版本中用到的babel-preset-stage-0

    第三,有一些新的包必须引入进来才可以。

  具体用法如下:

  1.必须安装的包如下:

  

  需要注意的是,这些@开头的包,在实用npm安装时,包名必须用引号引住,否则npm会把它当做不可识别的字符。例如:

  npm i babel-loader '@babel/core' -D

  babel-loader没有@符号,所以不需要引号包住;@babel/core则需要用引号包住。其他以此类推

  这里小版本号就不要计较了,只要大版本号能对上就都一样。

  2.各个包的作用如下   

  • babel-loader:加载器
  • @babel/core:babel核心包,babel-loader的核心依赖
  • @babel/preset-env:ES语法分析包
  • @babel/runtime和@babel/plugin-transform-runtime:babel 编译时只转换语法,几乎可以编译所有时新的 JavaScript 语法,但并不会转化BOM(浏览器)里面不兼容的API。比如 Promise,Set,Symbol,Array.from,async 等等的一些API。这2个包就是来搞定这些api的。
  • @babel/plugin-proposal-class-properties:用来解析类的属性的。

  3.配置webpack.config.js。由于“babel-lodaer”包名字没变,api写法也没变,还是那么写   

  { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},//处理高级ES语法的babel_lodaer

  4.添加.babelrc配置文件,并在该文件中写下如下配置信息   

    {

   "presets": ["@babel/preset-env"],

   "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]

    }

参考:https://www.cnblogs.com/ldq678/p/10448374.html但是原文有错,可以对比一下

https://www.cnblogs.com/soyxiaobi/p/9554565.html

babel-loader7和babel8版本的问题的更多相关文章

  1. ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍

    https://blog.csdn.net/a324539017/article/details/52824189

  2. react编译器jsxTransformer,babel

    1.JSX是什么JSX其实是JavaScript的扩展,React为了代码的可读性更方便地创建虚拟DOM等原因,加入了一些类似XML的语法的扩展. 2.编译器——jsxTransformerJSX代码 ...

  3. Anaconda多环境多版本python配置指导

    Anaconda多环境多版本python配置指导 字数3696 阅读644 评论0 喜欢0 最近学python,读完了语法后在GitHub找了一些练习来做,由 于学的是python3.x语法,而Git ...

  4. Babel 6 配置

    Babel 6 较之前版本有些变化,几个比较重要的点. npm package babel 已经不在使用了,分成了下列几个 package babel-cli, 适用于命令行 babel-core, ...

  5. 如何使用Babel将ES6转码为ES5?

    一.前言: 当我们还在沉迷于ES5的时候,殊不知ES6早就已经发布几年了.时代在进步,WEB前端技术也在日新月异,是时候做些改变了! ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器 ...

  6. webpack+babel项目在IE下报Promise未定义错误引出的思考

    低版本浏览器引起的问题 最近开发一个基于webpack+babel+react的项目,一般本地是在chrome浏览上面开发,chrome浏览器开发因为支持大部分新的js特性,所以一般不怎么需要poly ...

  7. 安装babel遇到的异常

    Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure ...

  8. 关于webpack,babel,以及es6和commonJS之间的联系(转)

    add by zhj: babel是将es6转为es5,而webpack从名字也能看出来,是一个打包工具,根据文件之间的依赖关系,将文件进行打包 原文:https://blog.csdn.net/a2 ...

  9. babel无法编译?

    ECMAScript 6(ES6)的发展或者说普及之快可以说是难以想象的,对很多人来说ECMAScript 5(ES5)都还普及呢.现代浏览器对ES6新特新或多或少的有些支持,但支持度不高,所以要想在 ...

随机推荐

  1. [TJOI2016 & HEOI2016] 字符串

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4556 [算法] 不难发现 , 对于每个询问        ans = max{ mi ...

  2. AutoIt:如何处理应用程序端口被占用的情况

    为公司的部署工程师书写了一个autoIt应用程序,现在遇到下面的一种情况: 产品分服务器端和客户端,启动的时候,会启用1785端口,然后彼此通信: 现在我的autoIt应用程序需要做的事情是: 如果1 ...

  3. HDU1203(01背包变形)

    I NEED A OFFER! Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   D ...

  4. 爬虫库之BeautifulSoup学习(五)

    css选择器: 我们在写 CSS 时,标签名不加任何修饰,类名前加点,id名前加 #,在这里我们也可以利用类似的方法来筛选元素,用到的方法是 soup.select(),返回类型是 list 1)通过 ...

  5. C#实现简易ajax调用后台方法

    在当前WEB当中,有些人都会抛弃asp.net的服务器控件,转而使用ajax来进行数据的交互和存储. 当我们大量使用ajax的时候,对于新手而言,肯定会创建很多的ashx或aspx页面,通过拼接参数, ...

  6. C/C++内存检测工具Valgrind

    内存检测Valgrind简介 Valgrind是运行在Linux上一套基于仿真技术的程序调试和分析工具,作者是获得过Google-O'Reilly开源大奖的Julian Seward, 它包含一个内核 ...

  7. (转载) 车牌识别EasyPR--开发详解

    车牌识别EasyPR--开发详解 http://blog.csdn.net/liuuze5/article/details/46290455 源码GitHub:https://github.com/l ...

  8. IT兄弟连 JavaWeb教程 Servlet会话跟踪 Session技术

    Servlet提供了HttpSession接口,该接口提供了一种跨多个页面请求或访问网站时识别用户以及存储有关用户信息的方式. Servlet容器使用这个接口来创建一个HTTP客户端和HTTP服务器之 ...

  9. 如何在普通 UIViewController 中使用 UITableView

    本系列文章 <Swift on iOS 学习笔记> 将以不定长度.不定内容.不定形式的方式对外发布,主要记录一些 “可重用” 的知识,感谢你的阅读. 在继承自 UIViewControll ...

  10. hyperledger fabric 1.0.5 分布式部署 (一)

    环境是个人虚拟机ubuntu 16.04 64 位版本 前期用户需要先安装好:gcc.g++.git 软件 安装 golang 首先给环境安装一个 go 语言环境,版本最好在1.8 以上 golang ...