关于babel-preset-env:构建工具babelpresetenv与stagex的使用指南

babel介绍babel总共分为3个阶段: 解析、转换和生成 babel自身不具备任何转换性能, 如果没有plugin,那么通过babel的代码和输出的是雷同的。 babel插件分为两种 语法插件:在解析的过程中,能使babel可能解析更多的语法转译插件: 在转换的过程中将代码输入。比方将箭头函数转译成失常的函数其中preset就是babel罕用的转译插件 preset介绍preset是一套标准, 外面蕴含了几十个转译插件。这是一组插件的汇合 preset能够分为上面几种: 按官网内容: env, react, flow, minifystage-x:stage-0 至 stage-3代表了es规范反对的不同阶段。0阶段是最高级的阶段,能够了解为仅仅才开始探讨规范, 换句话说就是根本没有什么浏览器反对es新规范。3示意成熟阶段,意味着支流浏览器的新版本都反对大部分新规范,根底的es新规范个性不须要降级编译为es5,浏览器即可原生反对。stage-3包含以下插件: transform-async-to-generator 反对async/awaittransform-exponentiation-operator 反对幂运算符语法糖stage-2包含stage-3的所有插件,额定还包含以下插件: syntax-trailing-function-commas 反对尾逗号函数,额...很鸡肋transform-object-reset-spread 反对对象的解构赋值stage-1包含stage2所有插件,额定还包含以下插件: transform-class-constructor-call 反对class的构造函数transform-class-properties 反对class的static属性transform-decorators 反对es7的装璜者模式即@符号引入的办法 (还在探讨中的个性?)transform-export-extensions 反对export办法stage-0包含stage1所有插件,额定还包含以下插件: transform-do-expressions 反对在jsx中书写if/elsetransform-function-bind 反对::操作符来切换上下文,相似于es5的bindbabel-preset-env历史版本babel-preset-latest(已被弃用)最后,为了让开发者可能尽早用上新的JS个性,babel团队开发了babel-preset-latest。这个preset比拟非凡,它是多个preset的汇合(es2015+),并且随着ECMA标准的更新更减少它的内容。 特点:蕴含了所有年度预设(babel-preset-es2015、babel-preset-es2016、babel-preset-es2017),无需用户独自指定某个预设。毛病:局部转码多余,如果应用默认设置,babel会将所有ES6与ES6+的新个性转成简单的es5的代码。然而大部分当初浏览器曾经反对ES6的局部个性。因为上述问题的存在,babel官网推出了babel-preset-env插件。它能够依据开发者的配置,按需加载插件。配置项大抵包含: 须要反对的平台:比方node、浏览器等。须要反对的平台的版本:比方反对node@6.1等。默认配置的状况下,它跟babel-preset-latest是等同的,会加载从es2015开始的所有preset。 //默认设置{ "presets": ["env"]}入门实例首先,装置依赖: npm install babel-cli --save-devnpm install babel-preset-env --save-dev创立一个index.js文件: let foo = () => 'foo';配置文件 .babelrc 如下,以后为默认配置。 { "presets": [ "env" ]}对index.js文件执行babel转化命令: // 形式一:.\node_modules\.bin\babel index.js// 形式二(npm5.2反对):npx babel index.js转换后果如下: 'use strict';var foo = function foo() { return 'foo';};针对node版本的配置babel-preset-env 提供了更精细化的配置,以晋升编译速度,同时缩小代码冗余。比方咱们index.js的代码如下: ...

August 7, 2020 · 2 min · jiezi

babel7-重新理解

测试环境node 10.14.1Babel 7.4.3 Babel 是什么?Babel 是一个工具链,主要用于将 ECMAScript2015+版本的代码转换为向后兼容的 Javascript 代码,以便能够运行在当前和旧版本的浏览器或其他环境中。 Babel 主要功能点:语法转换垫片兼容处理,通过 Polyfill 方式在目标环境中添加缺失的特性源码转换其他...使用理念Babel 主要通过 插件 plugins 的形式 达到转换代码的目的。Babel 本身内置了部分环境预设 preset-env,当然项目中 需要根据实际 进行配置。为了方便书写参数,一般通过 配置文件的方式 babel.config.js 或者.babelrc.js(以编程的方式创建配置)或者.bablercBabel 编译两大核心- 语法转换- 垫片支持Bable 核心模块@babel/coreBabel 语法转换核心功能,内置 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 ...

June 3, 2019 · 2 min · jiezi