正文

webapck使用babel编译ES6语法

譬如朝露 V管理员/ / 0 评论/ 1183阅读
11 22

应用场景

我们使用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


文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。