1 概述
babel是转码器,用于将es6
、es7
或更高版本的代码转换为es5
的代码。提升代码在浏览器中的兼容性。
2 配置
1. 编写示例代码
新增es6代码:
import './bbb.js'
console.log("aaaa js maomao")
require("./index.styl")
let fn = () => {
console.log("test es6")
}
fn()
console.log(fn)
这里新增了一个箭头函数,然后打印函数,可以在运行结果日志里查看最终代码是否被转化成普通的js函数。
2. 配置babel
1. 安装:
npm i babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D
2.新增.babelrc
文件(根目录下),配置参数:
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-class-properties"
]
}
3. 新增webpack
配置:
module.exports = {
module: {//模块
rules: [//规则,多个loader
{
test: /\.js$/,
use: {
//用 babel-loader 把es6转es5
loader: "babel-loader",
}
}
]
}
}
4. 查看结果
运行:
npm run dev
查看日志输出:
ƒ fn() {
console.log("test es6");
}
发现fn箭头函数已经被转化为普通函数。
暂无评论