babel7 重新理解

avwu 发布于2019-08-23 17:55 / 630人阅读

摘要：主要功能点语法转换垫片兼容处理，通过方式在目标环境中添加缺失的特性源码转换其他使用理念主要通过插件的形式达到转换代码的目的。就是解决这个问题的。

测试环境

node 10.14.1
Babel 7.4.3

Babel 是什么？

Babel 是一个工具链，主要用于将 ECMAScript2015+版本的代码转换为向后兼容的 Javascript 代码，以便能够运行在当前和旧版本的浏览器或其他环境中。

Babel 主要功能点：

语法转换

垫片兼容处理，通过 Polyfill 方式在目标环境中添加缺失的特性

源码转换

其他...

使用理念

Babel 主要通过插件 plugins 的形式达到转换代码的目的。

Babel 本身内置了部分环境预设 preset-env,当然项目中需要根据实际进行配置。

为了方便书写参数，一般通过配置文件的方式 babel.config.js 或者.babelrc.js(以编程的方式创建配置)或者.bablerc

Babel 编译两大核心

- 语法转换
- 垫片支持

Bable 核心模块 @babel/core

Babel 语法转换核心功能，内置 helpers 插件模块，是语法转换的主要辅助工具

@babel/preset-env

这是一个非常智能的环境预设模块，根据 env 配置自动分析查找对应的 helper 和 plugins 进行代码编译转换
基本使用：

presets: [
  [
    "@babel/preset-env",
    {
      targets: {
        chrome: "77",
        android: "2",
      },
      debug: true,
      useBuiltIns: false,
    },
  ],
],

其他参数参考文档配置就好了，这里重点分析一下 useBuiltIns 属性.
targets 可根据文档自行配置，这个比较简单。
debug 调试模式，建议开启，开启之后可以看到那些 target 使用了那些 plugins 和 polyfill

// 开启debug 模式的构建信息
Using targets:
{
  "android": "2",
  "chrome": "77"
}

Using modules transform: auto

Using plugins:
  transform-template-literals { "android":"2" }
  transform-literals { "android":"2" }
  transform-function-name { "android":"2" }
  transform-arrow-functions { "android":"2" }
  ......
  ......

Using polyfills with `usage` option:

[/Users/weng/Documents/dongsheng/projects/bable/src/app.js] Added following core-js polyfills:
  es6.object.set-prototype-of { "android":"2" }
  es6.object.create { "android":"2" }
  es6.symbol { "android":"2" }
  es7.symbol.async-iterator { "android":"2" }

[/Users/weng/Documents/dongsheng/projects/bable/src/app.js] Added following core-js polyfills:
  es6.string.includes { "android":"2" }
  es7.array.includes { "android":"2" }
  es6.array.of { "android":"2" }

useBuiltIns 属性使用：

false 不开启 polyfill 处理，只做语法代码转换。

usage 开启 polyfill 处理（依赖@babel/polyfill 模块）

entry 开启 polyfill 处理（依赖@babel/polyfill 模块）
useBuiltIns 的值只要不为 false,就不启动 polyfill 兼容，其他值都会引入 polyfill，存在全量变量污染的特性。

@babel/plugin-transform-runtime & @babel/runtime & @babel/runtime-corejs2

正常情况下，每个文件都有局部引入自身的 helpers 函数实现，打包后放置在文件的最顶部。
所以存在一个情况，多个文件使用了同样的语法，那么同样的 helpers 会多次引入。
transform-runtime 就是解决这个问题的。
transform-runtime 为了减少代码量，引入的 helpers 只保留一份
看个栗子：
源代码:

//app.js
import { add } from "./add";
function app() {
  add(1, 2);
  console.log(Object.assign({}, { ...{ name: "d" } }));
  const _a = Array.of(3, 11, 8);
}
app();

export function add(a, b) {
  console.log("加法:");
  console.log(Object.assign({}, { ...a }));
}

// 不启动 transform-runtime 构建后：
// 包含了多个同样的 helpers

plugins: ["@babel/plugin-transform-runtime"];
// 同样的helpers只加载一次,但是没有 方法api的实现

// corejs设置版本号：2或者3，都会引入非实例方法api的兼容实现
plugins: [
  [
    "@babel/plugin-transform-runtime",
    {
      corejs: 2,
    },
  ],
];

transform-runtime 也是做兼容的:

@babel/runtime 只做语法转换的(helpers 和 regenerator),只做语法转换, 没有新 api 的实现

@balel/runtime-corejs2 除了 helpers 和 regenarator ，还有 core-js 垫片兼容实现,替换非实例方法

prest-env 影响语法转换和垫片兼容
而且自身还兼容了默认的代码转换功能，根据具体 env 分析要使用的 plugins

语法转换和垫片兼容是两个独立功能，只不过都是根据 env 来实现目标转换.

专线服务云服务器 babel7 全面理解理解理解对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104360.html

react项目配置babel7

摘要：项目配置不多说，先上配置总结的包都是以开头的，所有的模块插件啥的都是在目录下中真正干活的是插件，插件的作用是预置，就是一个插件包的集合，你也可以自己写插件包插件包不够用，再配置呗配置了肯定要用新版本的老版本的会找而不是会 babel7 React项目配置不多说，先上babelrc配置 { presets: [ [ @babel/env, { ...

XGBCCC 2019-08-26 10:26 评论0 收藏0
使用babel7构建完美的纯ts开发环境

摘要：更新前言由于最近在重写个人的原生插件项目遇到了集成单测的需求单纯地使用会出现难以估计的错误所以决定使用完美摒弃了传统的方案对于主要流程记录下项目地址同时也欢迎新手和想提升的你参与到项目中来详情可阅读一基本配置先通过简单的配置让更新 [2019-5-9] Added Initial release 0、前言由于最近在重写个人的原生ts插件项目, 遇到了集成jest单测的需求, 单纯地...

pingink 2019-08-06 11:51 评论0 收藏0
使用babel7构建完美的纯ts开发环境

摘要：更新前言由于最近在重写个人的原生插件项目遇到了集成单测的需求单纯地使用会出现难以估计的错误所以决定使用完美摒弃了传统的方案对于主要流程记录下项目地址同时也欢迎新手和想提升的你参与到项目中来详情可阅读一基本配置先通过简单的配置让更新 [2019-5-9] Added Initial release 0、前言由于最近在重写个人的原生ts插件项目, 遇到了集成jest单测的需求, 单纯地...

Freeman 2019-08-26 18:26 评论0 收藏0
手动创建基于webpack+babel的react应用(babel7)

摘要：搭建一个项目环境首先生成文件至此我们就可以安装的相关依赖了。下的依赖核心部分，把转化成外部引用辅助函数和内置函数，自动填充代码而不会污染全局变量。入口文件我在中配的，所以在下新建文件，添加我们的第一个组件。搭建一个React项目环境首先npm init生成package.json文件.至此我们就可以安装react的相关依赖了。 npm install react --save np...

alaege 2019-08-23 15:20 评论0 收藏0
基于webpack4.x, babel7.x 搭建的多页面脚手架, 简化前端开发环境配置，开箱即用，

摘要：开箱即用的多页面脚手架基于模块化开发可复用的现代化网站感兴趣的朋友，请点个及时关注项目更新请点个项目请提特性支持前后端分离开发配置完整的打包方案支持本地开发热更新集成代码风格校验支持编写源码，编译生成生产代码内置开发环境，自动加样式前缀自 Webpack-seed 开箱即用的多页面脚手架, 基于webpack4.2x babel7.1x模块化开发可复用的现代化网站(Without Vu...

junfeng777 2019-08-23 12:29 评论0 收藏0