webpack04------babel

最新推荐文章于 2022-04-23 09:43:02 发布

邱先生~

最新推荐文章于 2022-04-23 09:43:02 发布

阅读量145

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/weixin_43932245/article/details/100138473

版权

webpack 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

介绍

将es6等高级语法转换为浏览器能识别的语法。

开始

npm i babel-loader @babel/core @babel/preset-env -D

babel-loader 是对应的loader 让webpack和babel之间可以沟通了但babel-loader并不会改变es的语法
@babel/core 是babel的核心语法库
@babel/preset-env 是最终将es6转为es5的库

配置：

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

转变后如下：

bundle.js 语法转换后的形式
var arr = [new Promise(function () {}), new Promise(function () {})];
arr.map(function (item) {
  console.log(item);
});

但！这只是对语法的转变，有些es6的函数，新增的方法还是没有补充到es5中，就是说像map这种处理数组的方法 es5中是没有的即使语法得到了转换但函数和方法有些还是不能用的。

这里我们需要用到另外一个库 @babel/polyfill

@babel/polyfill

npm i @babel/polyfill -D

@babel/polyfill需要在开发文件中引用

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

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

这样再次打包后，会补充es5中es6没有的函数方法等，与此同时，打包后的文件也会变大很多。

但是我们想只将我们用到的es6函数和方法，补充到es5中，没必要全部都补充进去，那该怎么办呢？

配置：

{
 	test:/\.js$/,
   exclude:/node_modules/,
   loader:'babel-loader',
   options:{
     presets:[
            ["@babel/preset-env",{
              useBuiltIns:'usage' // 将用到的es6语法打包，没用到的不会打包
            }]  
      ]
   }
 }

@babel/polyfill有一个缺点，就是转化后的语法都是全局变量，会污染全局作用域。

下面介绍下可以以闭包的形式将语法打包，就像是第三方库一样 ,不会污染全局 @babel/plugin-transform-runtime

@babel/plugin-transform-runtime

可以以闭包的形式将语法打包，就像是第三方库一样 ,不会污染全局

npm i @babel/plugin-transform-runtime  @babel/runtime  @babel/runtime-corejs2 -D

plugins:[
            ["@babel/plugin-transform-runtime",{
              "corejs":2, 默认为false 因为这个设置了值 所以需要用到 @babel/runtime-corejs2
              "helpers":true,
              "regenerator":true,
              "useESModules":false
 }]

.babelrc

在根目录下创建一个.babelrc文件，将对js的options配置都放到这个文件中，就可以了

{
   targets, useBuiltIns 等选项用于编译出兼容目标环境的代码
   其中 useBuiltIns 如果设为 "usage"
   Babel 会根据实际代码中使用的 ES6/ES7 代码，以及与你指定的 targets，按需引入对应的 polyfill
   而无需在代码中直接引入 import '@babel/polyfill'，避免输出的包过大，同时又可以放心使用各种新语法特性。

  "presets":[
    ["@babel/preset-env",{
      "targets":{
        "chrome":"67"
      },
      "useBuiltIns":"usage" 
    }]  
  ],
  "plugins":[
    ["@babel/plugin-transform-runtime",{
      "corejs":2,默认为false 因为这个设置了值 所以需要用到 @babel/runtime-corejs2
      "helpers":true,
      "regenerator":true,
      "useESModules":false
  }]
]
}