简单上手 babel

简单上手 babel

https://babel.docschina.org/docs/en/

前言

babel js编译器，将js编译成生产环境所需要的js。

demo

• 创建一个学习的demo，名为lean-babel，然后初始化，安装需要的依赖
• 此处我是用了pnpm，纯属个人习惯，npm、yarn 都可

pnpm init

pnpm install -D @babel/core @babel/cli @babel/preset-env

项目结构

+---src
    |----index.js
+---package.json
+---babel.config.json

// babel.config.json
// 官网的例子 直接拿过来用了
{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1"
                },
                "useBuiltIns": "usage",
                "corejs": "3.6.5"
            }
        ]
    ]
}

解释下 babel.config.json 的配置说明

• targets 兼容配置
• useBuiltIns
  • false
    • 不做任何操作
  • entry
    • 根据浏览器兼容，不智能，需要在入口处手动引入垫片
    • core-js 2

        import '@babel/polyfill'
    

    • core-js 3

        import 'core-js/stable';
        import 'regenerator-runtime/runtime';
    

  • usage
    • 根据浏览器兼容,分析代码,针对性的自动引入需要的垫片
• corejs
  • core-js 的版本
• modules
  • amd
  • umd
  • 等等

编译后的样子

// src/index.js
async function run() {
    return new Promise((resolve) => {
        console.log(123);
        resolve(1)
    });
}
run();

当我把 targets 的浏览器版本降低，在 useBuiltIns = usage 执行 babel ./src --out-dir ./dist

// /dist/index.js
// 会在顶部 添加出以类似的引入
require("core-js/modules/es6.symbol.js");

require("core-js/modules/es6.string.iterator.js");

require("core-js/modules/es6.array.iterator.js");

require("core-js/modules/web.dom.iterable.js");
...

// 后续代码 index.js 内容

useBuiltIns = entry 则不会 手动操作

总结下

• 现在基本都用 core-js@3
• useBuiltIns 使用 usage
• babel转移的代码，像require 浏览器也并不能识别 还需要类似webpack这样的工具再次加工