【webpack学习随笔】7.webpack配置javascript兼容性

babel

  • babel是一个javascript编译器,主要将es6+版本的代码转换为向下兼容js代码,方便js运行在当前和旧的浏览器中
  • 功能:语法转换

安装

1
npm install @babel/core @babel/cli -D

命令和使用

src/index.js

1
2
const sum = (a, b)=> a + b;
console.log(sum(1, 2));

package.json

1
2
3
4
5
{
"scripts": {
"bulld": "babel src --out-dir dist --watch"
}
}

插件

  • babel是一个编译器 (输入源码=> 输出编译后的代码),过程分为三个阶段:

    • 解析
    • 转换
    • 打印输出
  • babel是开箱即用的,但是什么动作都不做,const buildCode = (code)=> code,将代码解析后再输出同样的代码,想要babel做一些实际的工作,就需要一些插件

安装插件

1
npm install @babel/plugin-transform-arrow-functions -D

.babelrc

1
2
3
{
"plugins": ["@babel/plugin-transform-arrow-functions"]
}

预设

  • @babel/preset-env 插件,可以使用最新的js语法,而不需要去管理语法转换器,可选支持目标浏览器的polyfills
1
2
3
4
5
module.exports = function(){
return {
plugins: ["pluginA", "pluginB", "pluginC"]
}
}

安装

1
npm install @babel/preset-env -D

.babelrc

1
2
3
{
"plugins": ["@babel/preset-env"]
}

browsers

  • @babel/preset-env 会根据配置生成目标环境,生成插件列表来编译
  • 可以使用 .browserslistrc 文件来指定环境
1
2
> 0.25% // 市场份额大于0.25%
last 2 Chrome Versions // 最近两个chrome版本

polyfill

  • @babel/preset-env 插件只转换新的语法,不转换新的api,比如 Iterator,Generator,Set,Maps,Proxy,Reflect,Symbol,Promise 等全局对象,以及一些全局对象上的方法,例如Object.assgin都不会转换
  • 官方给出 @babel/polyfill 和 @babel/runtime 两种解决方案,来解决这种,全局对象或者全局对象上方法不足的情况
  • @babel/runtime 更适合在组件库中使用,而 @babel/polyfill 适合在业务中使用

@babel/polyfill

  • 可以完整模拟es2015+的环境
  • 可以使用Promise,WeekMap等新对象,Array.from,Object.assgin等静态方法,Array.prototype.includes等实例方法
  • 原理是通过向全局对象和内置对象的prototype上添加方法来实现的,缺点是会造成全局空间污染
  • V7.4.0版本已废弃

安装

1
2
npm install @babel/polyfill [email protected] --save
npm install webpack webpack-cli babel-loader -D

  • useBuiltIns: false 此时不对polyfill做操作
  • useBuiltIns: ‘entry’ 根据兼容引入浏览器不兼容的 polyfill
    • corejs: 3 配置entry,如果是corejs是3的版本,则 import ‘@babel/polyfill’ 需要改成 import ‘corejs/stable’; import “regenerator-runtime/runtime”
    • [email protected]分支已经不会再添加新特性,新增特性都会添加在[email protected]
  • useBuiltIns: ‘usage’ 会根据兼容性,以及代码中用到的api进行polyfill,实现了按需添加
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    module.export = {
    module:{
    rules: [
    {
    test: /\.js?$/,
    use: {
    loader: 'babel-loader',
    options: {
    persets: [
    ["@babel/preset-env", {
    useBuiltIns: false
    }]
    ]
    }
    }
    }
    ]
    }
    }

babel-runtime

  • babel为了解决全局变量污染的问题,提供了单独的babel-runtime用来提供编译模块的工机函数
  • 更像是一种按需加载的实现,例如需要使用promise,只需要在头部引入 import Promise from ‘babel-runtime/core-js/promise’
  1. 安装

    1
    npm install babel-runtime -D
  2. src/indexjs

    1
    2
    3
    4
    5
    6
    import Promise from 'babel-runtime/core-js/promise';
    const p = new Promise((resolve)=>{
    resolve('ok');
    })

    console.log(p)

#### babel-plugin-transform-runtime

  • 可以自动按需引入babel-runtime 下的工具函数。
  • 除了可以减少编译后提及之外,还能为代码创建一个沙盒环境
  1. 安装

    1
    npm install @babel/plugin-transform-runtime -D
  2. webpack.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    module: {
    rules: [
    {
    test: /\.js$/,
    include: path.resolve(__dirname, 'src'),
    exclude: /node_modules/,
    use: [
    {
    loader: 'babel-loader',
    options: {
    presets: [
    ['@babel/perset-env']
    ],
    plugins: [
    [
    '@babel/plugin-transform-runtime', {
    corejs: 3, // 如果遇到了Promise,会自动引入polyfill
    helpers:true, // 移除内联的babel-helpers,并自动引入babel-runtime/helpers来替代
    regenerator:true // 是否开启gen函数转换成使用regenerator runtime 来避免污染全局作用域
    }
    ]
    ]
    }
    }
    ]
    },

执行顺序

  • 插件(plugins)先执行,预设(presets)后执行
  • 插件顺序从前往后
  • 预设顺序从后往前

上一节

本文作者: haise
本文地址https://www.shifeng1993.com/2020/12/06/webpack_9/
版权声明: 转载请注明出处!