您现在的位置是:首页 > web前端 > webpackwebpack

webapck使用babel编译ES6语法

譬如朝露2019-11-22webpack260人已围观

简介应用场景我们使用ES6语法的时候,我们发现在一些低版本的浏览器是没有办法兼容ES6的语法的,比如说IE浏览器无法识别promise和map方法,所以...

应用场景

我们使用ES6语法的时候,我们发现在一些低版本的浏览器是没有办法兼容ES6的语法的,比如说IE浏览器无法识别promise和map方法,所以我们期望webpack帮助我们打包的时候,可以将ES6的语法直接转换成ES5的语法。

安装babel-loader

作用:在webpack和babel中间搭建了一座桥梁
我们首先要安装babel-loader @babel/core

npm install --save-dev babel-loader @babel/core

然后在webpack中配置

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]}
其中exclude: /node_modules/指的是,如果我们遇到node_modules中的不适用babel-loader来进行转换
其实我们使用了babel-loader,只是相当于在webpack和babel中搭建起了一座桥梁,并没有真正的实现将ES6转换成ES5.

安装@babel/preset-env

作用:将ES6的语法转换成ES5的语法
因此我们还需要安装@babel/preset-env,@babel/preset-env是用来做语法转换的

安装执行命令

npm install --save @babel/preset-env

然后在loader中进行相关的配置

module: {
  rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets:  ['@babel/preset-env'],
        }
      },
  ]}

安装@babel/polyfill

npm install --save @babel/polyfill

将低版本浏览器中没有的方法进行补充
使用的方法就是我们在最开始执行js文件的时候引入@babel/polyfill

import '@babel/polyfill';
const arr = [new Promise(() => { }), new Promise(() => { })]

arr.map(item => {
    console.log(item)
})
console.log(5)

我们发现,我们这样直接进行引入的时候,我们很多没有用到的ES6的特性也被打包了进来,这样会照成浪费,我们期望,我们用到什么就打包进来什么,所以我们进行下面的配置。
在loader中进行配置

{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    "presets": [
                        [
                            "@babel/preset-env",
                            {
                                "useBuiltIns": "entry"
                            }
                        ]
                    ]
                }
            }

useBuiltIns: 'usage'的配置用来 当我们@babel/polyfill填充的时候,不是将所有的特性都填充进来,而是填充我们使用过的特性

对UI库或是类库的babel配置

上面我们介绍的是对于业务代码的webpack配置babel的情况,但是如果我们只是写一个第三方的库,按照上面的配置方案进行配置会造成全局污染。那我们应该怎么对这样的场景进行配置呢?

安装transform-runtime和@babel/runtime

npm install -D @babel/plugin-transform-runtime
npm install -D @babel/runtime

在webpack中进行相关的配置,在babel-loader进行如下的配置

{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          plugins: [
            ['@babel/plugin-transform-runtime'],
            {
              corejs: 2,
              helpers: true,
              regenerator: true,
              useESModules: false
            }
          ]
        }
      },


在上面的配置中我们设置了corejs: 2,这个时候进行打包的时候我们会发现有一个报错,报错的具体意思缺少一个包,安装了@babel/runtime-corejs2这个包
npm install -D @babel/runtime-corejs2
我们发现对于babel的option配置项是很多的,我们都在loader中进行配置,会导致webpack的配置文件过长的问题,所以我们可以在根路径下创建一个.bablerc的文件。具体的写法.babelrc文件
{
  "plugins": [
    ["@babel/plugin-transform-runtime"],
    {
      "corejs": 2,
      "helpers": true,
      "regenerator": true,
      "useESModules": false
    }
  ]}

React的打包

先安装bable-preset-react,用来解析jsx的相关代码

npm install -D @babel/preset-react
装react的框架
npm install react react-dom -D

在.babelrc进行配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "67"
        },
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ]}

index.js的编码方式

import '@babel/polyfill';
import React, { Component } from 'react';
import ReactDom from 'react-dom';

class App extends Component {
  render() {
    return <div>22222</div>;
  }
}

ReactDom.render(<App />, document.getElementById('root'));

https://www.jianshu.com/p/559a254ecb3a

presets:执行的转换顺序是从下到上,从右到左

babel原理:参考https://www.jianshu.com/p/e9b94b2d52e2


譬如朝露

站长特荐

关闭
QQ 微信 支付宝扫一扫打赏