Conan_W's Blogs Conan_W's Blogs
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Conan_W

Web宝宝
首页
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • JavaScript文章

    • new命令原理
    • ES5面向对象
    • ES6面向对象
    • 多种数组去重性能对比
    • JS随机打乱数组
    • 判断是否为移动端浏览器
    • 将一维数组按指定长度转为二维数组
    • 防抖与节流函数
    • JS获取和修改url参数
    • 比typeof运算符更准确的类型判断
    • 三级目录

  • Vue文章

  • 学习笔记

  • 前端
  • Vue文章
  • vue-cli2中webpack4x的配置
conan_W
2021-05-15

tranform-runtime配置文件

# tranform-runtime配置文件

babel只会默认对句法进行转换,而那些方法,api不会转换,要转就要使用polyfill和transform,这里介绍transform,关于polyfill请看我的polyfill文章

-用来抽取helpers和builtins,自动导入到你的代码中,没有全局污染 -注意:实例的方法比如 "foobar".includes("foo")不会生效,因为这会修改现有的built-ins(解决这种情况,请使用babel-polyfill)

babel使用一些小的helpers如_extend来处理传统的函数,(也就是说function fn(){}这样的函数经过babel也会转码,而且转 出一大坨子代码),这个helpers会被添加到每一个需要它的文件,这种重复有时是不必要的,特别是在你的应用分布于多个文件里 面,这就是为什么需要transform-runtime插件了,因为使用这个插件,所有的helpers都会被提取到babel-runtime模块中从而 避免重复的代码出现在编译后的文件里面,这个被提取的runtime将会编译到你的项目中 这个插件的另外一个作用就是能够为你的代码创建一个沙箱环境,如果你使用babel-polyfill当处理这些全局函数如Promise, Set和Map,编译后的结果会污染整个全局环境,会生成很多built-ins,这种情况在你自己写代码可能影响不大,但是当你把代码 给别人使用或者你不确定你的代码的运行环境时,这时就出现问题了,那么这个插件就会对这些built-ins起个别名放在core-js 里面,所以可以使用这些全局的方法不需要导入polyfill

// 1. 安装
开发版本 npm install --save-dev babel-plugin-transform-runtime
生成版本 npm install --save babel-runtime

// 2. 使用
// 配置文件中
{
    "plugins": [
        ["transform-runtime",{
            "helpers": false,
            "polyfill": false,
            "regenerator": true,
            "moduleName": "babel-runtime"
        }]
    ]
}
// 上边传递的options中的参数默认都是true,不需要设置,因为这些都是这个插件的特点

 // 简单方式在项目中直接使用即可
{
    "plugins": [
        "transform-runtime"
    ]
}

/*
优点是:
    1.解决babel处理函数时生成的多余代码,这个插件把这些代码提取到它自己的helper模块中
    2.解决全局函数的全局污染,因为全局函数需要单独生成实现函数本身功能的特定代码,要把这部分代码提取到插件的core-js模块中
缺点是:
    1.无法解决实例的方法,实例的方法需要借助polyfill
*/
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
27
28
29
30
31
32
编辑 (opens new window)
最近更新
01
vue-cli3的改变
05-15
02
babel-polyfill
05-15
03
babelrc文件配置
05-15
更多文章>
Theme by Vdoing | Copyright © 2019-2026 Conan_W | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×