跳到主要内容

19-JS增加Babel配置

首先要心里清楚,网上的教程有很多都是知其然不知所以然。 所以这里要强调

通过webpack来增加对babel的支持的话,其中主要的就是通过loader来实现的, 那么只需要加载babel-loader的官方介绍的版本就可以了

https://www.npmjs.com/package/babel-loader/v/8.0.0-beta.1

安装上 如果你的版本是如下,主要看babel-loader的版本,webpack版本不重要

webpack 3.x | babel-loader 8.x | babel 7.x 需要安装如下相对应的,即使是Webpack5也同样使用此规则。 npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

如果你的babel-loader的版本是7.x版本,那么需要对应下面的包,注意包前面没有加@

webpack 3.x babel-loader 7.x | babel 6.x

npm install babel-loader babel-core babel-preset-env webpack

来自npm上babel-loader的自我介绍:https://www.npmjs.com/package/babel-loader/v/8.0.0-beta.1

当然是用webpack4.0的也是可以的,效果都是差不多的 https://www.npmjs.com/package/babel-loader/v/8.0.5

安装,也可以说跟webpack无关,主要是babel-loader的版本兼容问题。

webpack 4.x | babel-loader 8.x | babel 7.x

npm install -D babel-loader @babel/core @babel/preset-env webpack

webpack 4.x | babel-loader 7.x | babel 6.x

npm install -D babel-loader@7 babel-core babel-preset-env webpack

来自 https://www.npmjs.com/package/babel-loader/v/8.0.5

是用方式,无论你是webpack3.0还是4.0,在loader方面的是用效果是一样的

5.png