webapck .babelrc文件详解

taBabel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情:

语法转换

通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)

源码转换 (codemods)

-----来源于babel官方网站

本指南将想你展示如何将 ES2015+ 语法的 JavaScript 代码编译为能在当前浏览器上工作的代码。这将涉及到新语法的转换和缺失特性的修补。

整个配置过程包括:

1、运行以下命令安装所需的包(package):

    npm install --save-dev @babel/core @babel/cli @babel/preset-env

    npm install --save @babel/polyfill

2、在项目的根目录下创建一个命名为 babel.config.js 的配置文件,其内容为:

    constpresets = [  ["@babel/env",    {targets: {edge:"17",firefox:"60",chrome:"67",safari:"11.1",      },useBuiltIns:"usage",    },  ],];module.exports = { presets };

重点提一下babelrc文件的配置

官方文档上建议我们在package.json同目录下新建一个babel.config.js文件,实际开发中,包括vue-cli也是直接在根目录下新建.babelrc文件,我们也采用这种。

              presets : 预设,插件的集合,倒序执行

    plugins : 插件,先执行插件,在执行预设,顺序执行

    ignore : 忽略的文件

    minify : 压缩代码

    common : 是否需要注释

    env : 设置不同的环境,应用不同的配置,配置取值:BABEL_ENV,如若没有取 NODE_ENV 的值,默认为 development.

.babelrc 配置:主要有两个参数 presets(预设) plugins(插件)

               presets :是某一类 plugin 的集合,包含了某一类插件的所有功能。

    plugin : 将某一种需要转化的代码,转为浏览器可以执行代码。

编译的执行顺序:


    1、执行 plugins 中所有的插件

    2、plugins 的插件,按照顺序依赖编译

    3、所有 plugins 的插件执行完成,在执行 presets 预设。

    4、presets 预设,按照倒序的顺序执行。(从最后一个执行)

    5、完成编译。

配置注解

注解:

        targets: 描述您为项目配置的 支持/定位 的环境

        browsers :浏览器的支持情况,将返回支持浏览器列表。

        modules : 启用将 es6 转为其他模块。

        debug : 是否启用 console.log 

  include / exclude : 必须启用的 plugin 功能 / 不启用的 plugin 功能

  uglify : 压缩代码

  useBuiltIns : 

    false : 引用所有的 babel-polyfill , 在 webpack 中添加 babel-polyfill 入口处:

          entry:[ 'babel-polyfill' , 'index.js' ] , 引用所有的 polyfill,体积变大

    true : 引用部分,根据配置的 preset-env 环境,引用 polyfill ,

         在入口文件中要引用 babel-polyfill

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353

推荐阅读更多精彩内容