目前浏览器可识别的js是es5部分可识别es6所以为了兼容大部分浏览器,需要将es6 es7 es8转换成es5那就需要用到babel,进入webpack-course项目的根目录下面,安装依赖包babel-core
npm i babel-core //注意如果安装babel7的话采用下面的方式来安装
npm i @babel/core
在根目录下面新建文件 .babelrc
.babelrc文件,这个文件是用来设置转码的规则和插件的。
熟悉linux的话一定知道,rc结尾的文件通常代表运行时自动加载的文件,配置等等。在babel6中,这个文件必不可少。
touch .babelrc //注意加点
安装插件,在webpack中可以使用箭头函数
npm i babel-plugin-transform-es2015-arrow-functions
在.babelrc文件(该文件其实就是一个json文件)中进行插件配置
{
"plugins": [
"transform-es2015-arrow-functions"
]
}
如果想要可以使用babel命令,我们可以全局安装babel-cli
npm i -g babel-cli
然后就可以运行babel命令了
babel src/main.js
如果想要在webpack中打包的时候将js转换为es5那么我们还需要配置一下js的loader,在webpack.dev.js里面配置module
//js loader
{
test:/\.js$/,
use:[
{
loader:"babel-loader" //该loader会对js进行转换
}
],
exclude:/node_modules/ //不包含node_modules里面的js文件
},
然后安装babel-loader
npm i babel-loader
然后运行项目可以正常运行