4-1 配置

  1. 安装babel
  3. cnpm i @babel/core Ababel/preset-env babel-loader -S

4-2 创建babel配置文件

.babelrc

  1. {
  2.   //预设：babel 一系列插件的集合
  3.     "presets": ["@babel/preset-env"]
  4. }

4-3 webpack.config.js

  1. module.exports ={
  2. ...
  3. module:{
  4.         rules:[
  5.             { 
  6.               //匹配js文件
  7.                 test:/\.js$/,
  8.                 loader:"babel-loader",
  9.               //处理 src 文件
  10.                 include:path.join(__dirname,'src'),
  11.               //不处理 node_modules文件下的代码
  12.                 exclude:/node_modules/
  13.             }
  14.         ]
  15.     },
  16. }

4-4 src index.js

  1. # index.js
  2. const sum = (num1,num2)=>{
  3.     return num1+num2
  4. }
  5. const result = sum(5,10)
  6. console.log('result',result);
  7. class Animal{
  8.     constructor(name,age){
  9.         this.name = name,
  10.         this.age = age
  11.     }
  12. }
  13. const animal = new Animal('边牧',2)
  14. console.log('animal',animal);

4-5 运行

  1. npm run dev

输出

image.png

es6—es5

image.png

  1. var sum = function sum(num1, num2) {\n  return num1 + num2;\n}
  3. 箭头函数 转为 普通函数
  5. var Animal = function Animal(name, age) {\n  _classCallCheck(this, Animal);\n\n  this.name = name, this.age = age;\n}
  6. 类 转化成了 构造函数