Webpack 08 之使用Babel处理ES6语法

1,832 阅读4分钟

Webpack 之Babel

课程目标

  1. 打包命令webpack和devServer命令的区别
  2. babel是什么,做什么的?
  3. babel的优点?
  4. 浏览器的版本低可能不识别我们的js中的ES6的语法的解决方案

一、打包使用webpack命令和打包使用devServer命令的区别:

  • 使用webpack命令打包的文件,会生成一个dist文件夹,文件夹下面有一个index.js文件,命令为npx webpack
  • 使用devServer命令打包的文件,也会生成一个dist文件夹,但在dist文件夹下面并没有生成一个index.js文件,打包生成的文件实际保存到内存中,看不到。命令为:npm run start。

二、 babel是什么,做什么的?

Babel 是一个工具链,Babel是将ES6及以上版本的代码转换为ES5的工具。能够运行在当前和旧版本的浏览器或其他环境中,支持低版本浏览器的语法。

主要做的事情:

  1. 语法转换
  2. 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
  3. 源码转换 (codemods)

三、babel的优点?

  1. Babel 构建在插件之上。插件又可以分为:
  • 预设(preset):插件的封装版
  • 插件(plugin):一个个转换插件
  1. 可调试 -由于 Babel 支持 Source map,因此你可以轻松调试编译后的代码。
  2. 符合规范
  • Babel 尽最大可能遵循 ECMAScript 标准。不过,Babel - - -
  • 还提供了特定的选项来对标准和性能做权衡。
  • 代码紧凑
  1. Babel 尽可能用最少的代码并且不依赖太大量的运行环境。
  • 有些情况是很难达成的这一愿望的,因此 Babel 提供了 "loose" 参数,用以在特定的转换情况下在符合规范、文件大小和速度之间做折中。

四、浏览器的版本低可能不识别我们的js中的ES6的语法的解决方案

  • 使用babel,babel/core实际上是babel的核心库
  • 使用babel的步骤
  • 先下载npm install --save-dev babel-loader @babel/core
  • 配置在webpack.cofig.js中
module: {
  rules: [
    { 
    test: /\.js$/, 
    exclude: /node_modules,
    
    //node_modules的js文件不用ES6转化为ES5
    
    loader: "babel-loader" 
        
    }
  ]
}
  • 必须借助preset-env主要是这个模块将ES6转化Es5,下载 npm install @babel/preset-env --save-dev
  • 配置在webpack.config.js
module: {
  rules: [
    { 
    test: /\.js$/, 
    exclude: /node_modules,
    
    //node_modules的js文件不用ES6转化为ES5
    
    loader: "babel-loader" ,
    //配置的是我的presets的模块,将ES6的语法转化为ES5的语法
    options:{
        presets:[["@babel/preset-env"]]
    }
        
    }
  ]
}
  • 在低版本的浏览器,变量或者是函数翻译再对低版本浏览器的补充,使用@babel/polyfill来对变量和函数的补充
  • 先下载安装 npm install --save @babel/polyfill
  • 在src目录下的index.js引入,在业务逻辑代码的最顶部 import "@babel/polyfill";

polyfill打包后的文件会导致文件过大,全部都补充了

但我并不想全部都补充,之补充的是我的低端浏览器不支持的业务逻辑的代码 配置

module: {
  rules: [
    { 
    test: /\.js$/, 
    exclude: /node_modules,
    
    //node_modules的js文件不用ES6转化为ES5
    
    loader: "babel-loader" ,
    //配置的是我的presets的模块,将ES6的语法转化为ES5的语法
    options:{
        presets:[["@babel/preset-env"],{
        {
            //对浏览器大于67的就不用进行转译,因为本身浏览器版本高的就支持,所以不用进行转译
            targets:{
                chrome:'67'
            }
        },
        
         //根据业务逻辑来进行对js文件打包,对低版本的支持
            useBuiltIns:"usage"
        },
        ]
    }
    }
  ]
}

当我们使用polyfill进行开发内库,第三方模块,或开发第三方文件, 或这开发组件时,再注入变量,函数的时候会造成全局变量的污染,解决方案

  • 先下载安装 npm install --save npm install --save-dev @babel/plugin-transform-runtime
  • 配置
  options:{
        presets:[[" @babel/plugin-transform-runtime",
        {
        "corejs": 2,//需要提前安装下载  npm install --save @babel/runtime-corejs2
        "helpers": true,//
        "regenerator": true,//
        "useESModules": false,//
        }
      ]
  }

@babel/plugin-transform-runtime插件的好处:

  • 可以有效的避免polyfill的问题
  • 避免全局变量的污染

注意:

"corejs": false,我将false改为2,就需要下载npm install --save @babel/runtime-corejs2

原因:

当我的代码中没有map(),promise()方法的时候,就会把代码打包到我的main.js中,如果不配置就不会打包到我的main.js文件中,还需要下载一个包:install --save @babel/runtime-corejs2

总结:

当我只是业务逻辑的时候就是用"@babel/preset-env",

当我使用第三方和内库的时候就是用@babel/runtime-corejs2