Babel简述及作用

Babel是一个JavaScript编辑器,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器(chrome,safire, firefox, IE)或其他环境中。

项目中运用

需要安装的插件

• babel-loader(必装)
• @babel/croe(必装)

npm i babel-loader @babel/croe -D

• @babel/preset-env(必装): 基本js兼容性处理, 问题: 只能转换基本语法,如promise高级语法不能转换

npm i @babel/preset-env -D

• @babel/polyfill: 全部js兼容性处理, 问题: 只要解决部分兼容性问题,就将所有兼容性代码全部引入,体积过大

npm i @babel/polyfill -D

• core-js: 需要做兼容性处理就:按需加载

npm i core-js -D

用法

根据以上介绍,就采用最优的方法,@babel/preset-env搭配core-js 进行按需加载兼容性代码

webpack.config.js代码配置

const { resolve } = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'dist')
  },
  module:{
    rules: [
      /*
        js兼容性处理: babel-loader @babel/core @babel/preset-env
        1.基本js兼容性处理 --> @babel/preset-env
        问题: 只能转换基本语法,如promise高级语法不能转换
        2.全部js兼容性处理 --> @babel/polyfill 直接在js文件中引入即可
        问题: 我只要解决部分兼容性问题,但是将所有兼容性代码全部引入,体积太大了
        3.需要做兼容性处理的就做: 按需加载 -->core-js

        需要第一个和第三个配合时候就可以兼容全部js了
      */
     {
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
       options: {
         // 预设:指示babel做怎么样的兼容性处理
         presets: [
           [
              '@babel/preset-env',
              {
                // 按需加载
                useBuiltIns: 'usage',
                corejs:{
                  version: 3
                },
                // 指定兼容性做到哪个版本浏览器
                targets:{
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }
           ]
          ]
       }
     }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}

压缩JS

压缩js只需要把webpack.config.js中的mode改为生产模式即可

mode: 'production

压缩html

修改webpack.config.js中plugins中HtmlWebPackPlugin配置

plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      // 压缩html代码
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
      }
    })
  ],

demo地址

借鉴视频: B站尚硅谷