根据官网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. BZOJ_3786_星系探索_splay维护出栈入栈序

    BZOJ_3786_星系探索_splay维护出栈入栈序 Description 物理学家小C的研究正遇到某个瓶颈. 他正在研究的是一个星系,这个星系中有n个星球,其中有一个主星球(方便起见我们默认其为 ...

  2. 「LuoguP4147」 玉蟾宫(并查集

    题目背景 有一天,小猫rainbow和freda来到了湘西张家界的天门山玉蟾宫,玉蟾宫宫主蓝兔盛情地款待了它们,并赐予它们一片土地. 题目描述 这片土地被分成N*M个格子,每个格子里写着'R'或者'F ...

  3. POJ2274(后缀数组应用)

    Long Long Message Time Limit: 4000MS   Memory Limit: 131072K Total Submissions: 25272   Accepted: 10 ...

  4. 蓝桥杯 2014本科C++ B组 地宫取宝 DFS+记忆化搜索

    历届试题 地宫取宝   时间限制:1.0s   内存限制:256.0MB 问题描述 X 国王有一个地宫宝库.是 n x m 个格子的矩阵.每个格子放一件宝贝.每个宝贝贴着价值标签. 地宫的入口在左上角 ...

  5. bzoj2687

    整体二分+决策单调性 这个方法已经忘了... 决策单调性是指dp[i]由dp[1]->dp[i-1]更新,那么当dp[j]比dp[k]优且j>k时,对于i->n j都比k优 通过这个 ...

  6. URAL 1996 Cipher Message 3

    题目 神题. 记得当初DYF和HZA讲过一个FFT+KMP的题目,一直觉得很神,从来没去做. 没有真正理解FFT的卷积. 首先考虑暴力. 只考虑前7位 KMP 找出所有 B 串可以匹配 A 串的位置. ...

  7. Content Security Policy的学习理解

    以下内容转载自 http://www.cnblogs.com/alisecurity/p/5924023.html 跨域脚本攻击 XSS 是最常见.危害最大的网页安全漏洞. 为了防止它们,要采取很多编 ...

  8. SqlServer2012——表

    1.数据类型 数字类型:int,smallint, 高精度:decimal,numeric 日期和时间:datetime,smalldatetime 二进制:binary,varbinary,imag ...

  9. POJ1088滑雪(记忆化搜索)

    就是用DP,DP[i][j]是在这个(i,j)位置作为起点的最长长度. 因为可能会超时,DP的话每次就是记录,然后就不用回溯了. 很简单的DFS里面的记忆化搜索. #include <stdio ...

  10. laravel 安装配置前准备

    Laravel 框架使用 Composer 来管理其依赖性.所以,在你使用 Laravel 之前,你必须在你电脑上是否安装了 Composer.最简单的获取Composer的方式就是百度之,百度关键字 ...