babel-loader7和babel8版本的问题
根据官网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版本的问题的更多相关文章
- ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍
https://blog.csdn.net/a324539017/article/details/52824189
- react编译器jsxTransformer,babel
1.JSX是什么JSX其实是JavaScript的扩展,React为了代码的可读性更方便地创建虚拟DOM等原因,加入了一些类似XML的语法的扩展. 2.编译器——jsxTransformerJSX代码 ...
- Anaconda多环境多版本python配置指导
Anaconda多环境多版本python配置指导 字数3696 阅读644 评论0 喜欢0 最近学python,读完了语法后在GitHub找了一些练习来做,由 于学的是python3.x语法,而Git ...
- Babel 6 配置
Babel 6 较之前版本有些变化,几个比较重要的点. npm package babel 已经不在使用了,分成了下列几个 package babel-cli, 适用于命令行 babel-core, ...
- 如何使用Babel将ES6转码为ES5?
一.前言: 当我们还在沉迷于ES5的时候,殊不知ES6早就已经发布几年了.时代在进步,WEB前端技术也在日新月异,是时候做些改变了! ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器 ...
- webpack+babel项目在IE下报Promise未定义错误引出的思考
低版本浏览器引起的问题 最近开发一个基于webpack+babel+react的项目,一般本地是在chrome浏览上面开发,chrome浏览器开发因为支持大部分新的js特性,所以一般不怎么需要poly ...
- 安装babel遇到的异常
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure ...
- 关于webpack,babel,以及es6和commonJS之间的联系(转)
add by zhj: babel是将es6转为es5,而webpack从名字也能看出来,是一个打包工具,根据文件之间的依赖关系,将文件进行打包 原文:https://blog.csdn.net/a2 ...
- babel无法编译?
ECMAScript 6(ES6)的发展或者说普及之快可以说是难以想象的,对很多人来说ECMAScript 5(ES5)都还普及呢.现代浏览器对ES6新特新或多或少的有些支持,但支持度不高,所以要想在 ...
随机推荐
- BZOJ_3786_星系探索_splay维护出栈入栈序
BZOJ_3786_星系探索_splay维护出栈入栈序 Description 物理学家小C的研究正遇到某个瓶颈. 他正在研究的是一个星系,这个星系中有n个星球,其中有一个主星球(方便起见我们默认其为 ...
- 「LuoguP4147」 玉蟾宫(并查集
题目背景 有一天,小猫rainbow和freda来到了湘西张家界的天门山玉蟾宫,玉蟾宫宫主蓝兔盛情地款待了它们,并赐予它们一片土地. 题目描述 这片土地被分成N*M个格子,每个格子里写着'R'或者'F ...
- POJ2274(后缀数组应用)
Long Long Message Time Limit: 4000MS Memory Limit: 131072K Total Submissions: 25272 Accepted: 10 ...
- 蓝桥杯 2014本科C++ B组 地宫取宝 DFS+记忆化搜索
历届试题 地宫取宝 时间限制:1.0s 内存限制:256.0MB 问题描述 X 国王有一个地宫宝库.是 n x m 个格子的矩阵.每个格子放一件宝贝.每个宝贝贴着价值标签. 地宫的入口在左上角 ...
- bzoj2687
整体二分+决策单调性 这个方法已经忘了... 决策单调性是指dp[i]由dp[1]->dp[i-1]更新,那么当dp[j]比dp[k]优且j>k时,对于i->n j都比k优 通过这个 ...
- URAL 1996 Cipher Message 3
题目 神题. 记得当初DYF和HZA讲过一个FFT+KMP的题目,一直觉得很神,从来没去做. 没有真正理解FFT的卷积. 首先考虑暴力. 只考虑前7位 KMP 找出所有 B 串可以匹配 A 串的位置. ...
- Content Security Policy的学习理解
以下内容转载自 http://www.cnblogs.com/alisecurity/p/5924023.html 跨域脚本攻击 XSS 是最常见.危害最大的网页安全漏洞. 为了防止它们,要采取很多编 ...
- SqlServer2012——表
1.数据类型 数字类型:int,smallint, 高精度:decimal,numeric 日期和时间:datetime,smalldatetime 二进制:binary,varbinary,imag ...
- POJ1088滑雪(记忆化搜索)
就是用DP,DP[i][j]是在这个(i,j)位置作为起点的最长长度. 因为可能会超时,DP的话每次就是记录,然后就不用回溯了. 很简单的DFS里面的记忆化搜索. #include <stdio ...
- laravel 安装配置前准备
Laravel 框架使用 Composer 来管理其依赖性.所以,在你使用 Laravel 之前,你必须在你电脑上是否安装了 Composer.最简单的获取Composer的方式就是百度之,百度关键字 ...