webpack打包用Babel处理es6

·  阅读 3528
webpack打包用Babel处理es6

今天来梳理下webpack中关于js打包的处理方式,首先我们都知道需要处理es6+的编译就要用到babel,那什么是babel呢?

Babel是JavaScript编译器,能将ES6代码转换成ES5代码,让我们开发过程中放⼼使⽤JS新特性⽽不⽤担 ⼼兼容性问题。但是默认的Babel只⽀持let等⼀些基础的语法转换,Promise等特性无法转换,这时候需要借助@babel/polyfill,把es的新特性都装进来,来弥补低版本浏览器中缺失的特性。

1、安装babel

npm i babel-loader @babel/core @babel/preset-env -D
复制代码

2、插件说明

这里我们先说明下babel-loader,他不是用来做es6转义的,它是babel与webpack的通信桥梁,我们需要转义需要用到@babel/preset-env,这里安装的@babel/core其实就是bable(目前的babel版本是7.X),下面是来自babel官网的关于不同类型的语法转移插件:

es6+ ----->@babel/presets-env --> es5
flow语法 ---->@babel/presets-flown -->es5
jsx语法 ---->@babel/preset-react -->es5
ts语法 ---->@babel/preset-ts -->es5
复制代码

3、一般我们会在webpack.config.js文件中做如下配置:

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: "babel-loader",
        options: {
            presets: ["@babel/preset-env"]
        }
    }
}
复制代码

4、关于@babel/polyfill使用

上文提到了babel不能转义的es6+的特性,这里我们就需要一个垫片插件来辅助转义的实现。

4.1 安装(因为在生产环境也需要依赖使用)

npm install --save @babel/polyfill
复制代码

4.2 使用

//index.js 顶部
import "@babel/polyfill";
复制代码

这种方式打包会发现打包的体积增大了很多,因为polyfill默认会把所有的特性注入进来,那么能不能按需加载呢?这里我们就要使用到babel7的新功能,useBuiltIns,它有三个参数可选:

//需要在 webpack 的⼊⼝⽂件⾥ import "@babel/polyfill" ⼀次。 babel
会根据你的使⽤情况导⼊垫⽚,没有使⽤的功能不会被导⼊相应的垫⽚
useBuiltIns: "entry",  
// 按需注⼊,不需要 import ,全⾃动检测,但是要安装 @babel/polyfill 
useBuiltIns: "usage",  
 //如果你 import "@babel/polyfill" ,它不会排除掉没有使⽤的垫⽚,程序体积会庞⼤。(不推荐)
useBuiltIns: "false" 
复制代码

那么这个特性要怎么配置呢,有以下两种方式:

// 第一种:在webpack.config.js中配置
options: {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    edge: "17",
                    firefox: "60",
                    chrome: "67",
                    safari: "11.1"
                },
            corejs: 2,//新版本需要指定核⼼库版本
            useBuiltIns: "usage"//按需注⼊
            }
        ]
    ]
}
复制代码
// 第二种: 新建.babelrc⽂件,把options部分移⼊到该⽂件中
{
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    edge: "17",
                    firefox: "60",
                    chrome: "67",
                    safari: "11.1"
                },
                corejs: 2, //新版本需要指定核⼼库版本
                useBuiltIns: "usage" //按需注⼊
            }
        ]
    ]
}
复制代码

注意:这里有个需要注意的问题是如果你使用了比较高版本的,比如es11这种特性,就需要使用corejs 3.x的版本了,他会比2多一些新特性。

5、既然上文提到了vue\react的语法转义,那下面就来解析下使用方式:

5.1 安装babel与react转换的插件

npm install --save-dev @babel/preset-react
复制代码

在babelrc⽂件⾥添加:

"@babel/preset-react"
复制代码

5.2 安装babel与vue转换的插件

npm install -D vue-loader vue-template-compiler
复制代码
// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
  ]
}
复制代码

以上仅为自己学习过程中的了解,欢迎指正!

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改