babel7 学习笔记(1)

最新推荐文章于 2023-04-14 16:11:24 发布
最新推荐文章于 2023-04-14 16:11:24 发布
阅读量313 收藏
点赞数
分类专栏： 前端工程化 文章标签： bable

babel7 学习笔记(1)

网站资源

什么是 Babel ?

  • Babel 是一个 JavaScript 编译器
  • Babel 是一个工具链，主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码：
    • 转换语法
    • Polyfill 实现目标环境中缺少的功能 (通过 @babel/polyfill)
    • 源代码转换 (codemods)
    • 更多！（查看视频）
// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);
// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

有关编译器的精彩教程，请查看超级微型编译器，它还解释了 Babel 本身如何在高级语言上工作。

ES2015 及其他

  • Babel 通过语法变换器支持最新版本的 JavaScript。
  • 这些 plugins 允许你现在就使用新语法，而无需等待浏览器的支持。查看我们的使用指南以开始使用。

可插拔

// A plugin is just a function
export default function ({types: t}) {
  return {
    visitor: {
      Identifier(path) {
        let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name.split('').reverse().join('');
      }
    }
  };
}

可调试

  • 支持 Source map ，因此你可以轻松调试编译过的代码。

规范性

  • Babel 试图尽可能地遵循 ECMAScript 标准。为了平衡性能，它也可能有特定的一些选项，以便可以更符合规范。

压缩性

  • Babel 尝试使用尽可能少的代码而不依赖于庞大的运行时环境。
  • 有些情况可能很难达到，因此为了保证可读性、文件大小以及（运行）速度，会针对特定转换牺牲一些合规性，即提供 “loose” 选项。

Babel常用包和插件

@babel/cli

  • @babel/cli

    安装
    • 虽然你 可以 在你的机器上全局安装 Babel CLI, 但根据单个项目进行本地安装会更好一些。
    • 这样做有两个主要的原因：
      • 同一机器上的不同的项目可以依赖不同版本的 Babel, 这允许你一次更新一个项目。
      • 这意味着在你的工作环境中没有隐含的依赖项。它将使你的项目更方便移植、更易于安装。
    • 我们可以通过以下命令本地安装 Babel CLI:
    npm install --save-dev @babel/core @babel/cli

    注意： 如果你没有一个 package.json, 在安装之前请新建一个。这可以保证 npx 命令产生合适的交互。

    • 在完成安装之后，你的 package.json 文件应该包括：
    {
  "devDependencies": {
+   "@babel/cli": "^7.0.0",
+   "@babel/core": "^7.0.0"
  }
}
    用法
    • 我们将把我们的指令放在本地版本的 npm 脚本中，而不是直接通过命令行来运行 Babel.
    • 简单的在你的 package.json 中添加一个 “scripts” 属性并将 babel 命令放在它的 build 属性中。
      {
    "name": "my-project",
    "version": "1.0.0",
+   "scripts": {
+     "build": "babel src -d lib"
+   },
    "devDependencies": {
      "babel-cli": "^6.0.0"
    }
  }
    • 现在从我们的终端可以运行以下命令：
    npm run build
    • 这会按照和之前一样的方式来运行 Babel 并将输出放在 lib 目录下，唯一不同在于我们现在使用了一个本地拷贝。
    • 另外，你可以在 node_modules 中引用 babel 命令。
    ./node_modules/.bin/babel src -d lib
    创建.babelrc 配置文件
    • 非常棒！虽然已经配置好了 Babel ，但并没有让它真正生效。在项目的根目录中创建一个 .babelrc 文件并启用一些插件。
    • 首先，你可以使用转换 ES2015+ 的 env preset 。
    npm install @babel/preset-env --save-dev
    • 为了让 preset 生效，你需要像下面这样定义你的 .babelrc 文件：
    {
  "presets": ["@babel/preset-env"]
}
    编译前后
    // 前
const fun = () => console.log('hello word！');
// 后
"use strict";
var fun = function fun() {
  return console.log('hello word！');
};
@babel/plugin-transform-block-scoping
  • @babel/preset-env 已包含 该插件
  • 文档地址
  • 此插件还验证所有const变量。 重新分配常量是一个运行时错误，它将为那些插入必要的错误代码。
  • 安装
npm install --save-dev @babel/plugin-transform-block-scoping
  • 配置
{
  "plugins": ["@babel/plugin-transform-block-scoping"]
}
@babel/plugin-transform-classes
npm install --save-dev @babel/plugin-transform-classes
  • 配置
// without options
{
  "plugins": ["@babel/plugin-transform-classes"]
}

// with options
{
  "plugins": [
    ["@babel/plugin-transform-classes", {
      "loose": true
    }]
  ]
}
  • 示例
    • 源码
    class Test {
  constructor(name) {
    this.name = name;
  }

  logger () {
    console.log("Hello", this.name);
  }
}
    • 编译后
    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var Test =
/*#__PURE__*/
function () {
  function Test(name) {
    _classCallCheck(this, Test);

    this.name = name;
  }

  _createClass(Test, [{
    key: "logger",
    value: function logger() {
      console.log("Hello", this.name);
    }
  }]);

  return Test;
}();
@babel/polyfill
  • 文档地址
  • Babel包含一个polyfill，它包含一个自定义的再生器运行时和core-js。这意味着您可以使用新的内置函数（如Promise或WeakMap），静态方法（如Array.from或Object.assign），实例方法（如Array.prototype.includes）和生成器函数（假设您使用的是再生器插件）。 为了做到这一点，polyfill添加到全局范围以及像String这样的本机原型。
  • 安装
npm install --save @babel/polyfill

因为这是一个polyfill（它将在你的源代码之前运行），我们需要它作为依赖，而不是devDependency

  • polyfill是为方便起见而提供的，但您应该将它与@ babel / preset-env和useBuiltIns选项一起使用，这样它就不会包含并不总是需要的整个polyfill。 否则，我们建议您手动导入单个polyfill。
require("core-js/modules/es6.array.copy-within");

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

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

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

require("core-js/modules/es7.array.flat-map");

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

require("core-js/modules/es7.array.includes");

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

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

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

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

require("core-js/modules/es6.date.to-json");

require("core-js/modules/es6.date.to-primitive");

require("core-js/modules/es6.function.has-instance");

require("core-js/modules/es6.function.name");

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

require("core-js/modules/es6.math.acosh");

require("core-js/modules/es6.math.asinh");

require("core-js/modules/es6.math.atanh");

require("core-js/modules/es6.math.cbrt");

require("core-js/modules/es6.math.clz32");

require("core-js/modules/es6.math.cosh");

require("core-js/modules/es6.math.expm1");

require("core-js/modules/es6.math.fround");

require("core-js/modules/es6.math.hypot");

require("core-js/modules/es6.math.imul");

require("core-js/modules/es6.math.log1p");

require("core-js/modules/es6.math.log10");

require("core-js/modules/es6.math.log2");

require("core-js/modules/es6.math.sign");

require("core-js/modules/es6.math.sinh");

require("core-js/modules/es6.math.tanh");

require("core-js/modules/es6.math.trunc");

require("core-js/modules/es6.number.constructor");

require("core-js/modules/es6.number.epsilon");

require("core-js/modules/es6.number.is-finite");

require("core-js/modules/es6.number.is-integer");

require("core-js/modules/es6.number.is-nan");

require("core-js/modules/es6.number.is-safe-integer");

require("core-js/modules/es6.number.max-safe-integer");

require("core-js/modules/es6.number.min-safe-integer");

require("core-js/modules/es6.number.parse-float");

require("core-js/modules/es6.number.parse-int");

require("core-js/modules/es6.object.assign");

require("core-js/modules/es7.object.define-getter");

require("core-js/modules/es7.object.define-setter");

require("core-js/modules/es7.object.entries");

require("core-js/modules/es6.object.freeze");

require("core-js/modules/es6.object.get-own-property-descriptor");

require("core-js/modules/es7.object.get-own-property-descriptors");

require("core-js/modules/es6.object.get-own-property-names");

require("core-js/modules/es6.object.get-prototype-of");

require("core-js/modules/es7.object.lookup-getter");

require("core-js/modules/es7.object.lookup-setter");

require("core-js/modules/es6.object.prevent-extensions");

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

require("core-js/modules/es6.object.is");

require("core-js/modules/es6.object.is-frozen");

require("core-js/modules/es6.object.is-sealed");

require("core-js/modules/es6.object.is-extensible");

require("core-js/modules/es6.object.keys");

require("core-js/modules/es6.object.seal");

require("core-js/modules/es6.object.set-prototype-of");

require("core-js/modules/es7.object.values");

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

require("core-js/modules/es7.promise.finally");

require("core-js/modules/es6.reflect.apply");

require("core-js/modules/es6.reflect.construct");

require("core-js/modules/es6.reflect.define-property");

require("core-js/modules/es6.reflect.delete-property");

require("core-js/modules/es6.reflect.get");

require("core-js/modules/es6.reflect.get-own-property-descriptor");

require("core-js/modules/es6.reflect.get-prototype-of");

require("core-js/modules/es6.reflect.has");

require("core-js/modules/es6.reflect.is-extensible");

require("core-js/modules/es6.reflect.own-keys");

require("core-js/modules/es6.reflect.prevent-extensions");

require("core-js/modules/es6.reflect.set");

require("core-js/modules/es6.reflect.set-prototype-of");

require("core-js/modules/es6.regexp.constructor");

require("core-js/modules/es6.regexp.flags");

require("core-js/modules/es6.regexp.match");

require("core-js/modules/es6.regexp.replace");

require("core-js/modules/es6.regexp.split");

require("core-js/modules/es6.regexp.search");

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

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

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

require("core-js/modules/es7.symbol.async-iterator");

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

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

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

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

require("core-js/modules/es6.string.code-point-at");

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

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

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

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

require("core-js/modules/es6.string.from-code-point");

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

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

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

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

require("core-js/modules/es7.string.pad-start");

require("core-js/modules/es7.string.pad-end");

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

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

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

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

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

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

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

require("core-js/modules/es7.string.trim-left");

require("core-js/modules/es7.string.trim-right");

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

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

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

require("core-js/modules/es6.typed.uint8-clamped-array");

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

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

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

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

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

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

require("core-js/modules/es6.weak-map");

require("core-js/modules/es6.weak-set");

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

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

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

require("regenerator-runtime/runtime");
  • webpack打包配置
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "targets": "> 0.25%, not dead"
      }
    ]
  ]
}
我是何平
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Babel常见配置及插件
weixin_28750673的博客
01-03 3886
Babel常见配置及插件 常用配置 @babel/preset-typescript ts预设插件，使用ts必装 // 配置 { "presets": [ "@babel/preset-typescript" ] } @babel/preset-env js预设插件，可以使用高版本js语法而不需要单独转换，根据babel和corejs polyfill语法映射进行转换 // 配置 { "presets": [ [ "@babel/preset-env",
七天入门node.js（04）
weixin_45311714的博客
11-02 214
babel是一款基于node开发的工具，其功能是对es6的新语法和新特性进行转码。
babel转换class时使用defineProperty导致的装饰器问题
东逝水
08-16 526
babel转码class使用defineProperty导致装饰器失效问题
常见的Webpack Babel用来解析ES6语法的插件
fuweihan00的博客
04-14 592
7. @babel/plugin-transform-regenerator：用于将使用async/await关键字的异步函数转换为ES5的生成器函数。4. @babel/plugin-transform-template-literals：用于将模板字面量转换为普通字符串拼接。1. @babel/plugin-transform-arrow-functions：用于将箭头函数转换为普通函数。6. @babel/plugin-transform-object-assign：用于将对象的扩展运算符转换为。
详解package.json文件
Mr_Yan的博客
09-13 3326
JS线程 之所以js中有事件循环，原因就是因为js是单线程的原因 进程与线程区别？JS单线程带来的好处？ 一个进程中可以有多个线程，比如渲染线程、JS 引擎线程、HTTP 请求线程等等。当你发起一个请求时，其实就是创建了一个线程，当请求结束后，该线程可能就会被销毁。 在 JS 运行的时候可能会阻止 UI 渲染，这说明了两个线程是互斥的。这其中的原因是因为 JS 可以修改 DOM，如果在 JS 执行的时候 UI 线程还在工作，就可能导致不能安全的渲染 UI。这其实也是一个单线程的好处，得益于 JS 是单线程运
Babel 入门教程学习笔记
01-19
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。下面是一个例子。 // 转码前 input.map(item => item + 1);...
vue学习笔记1
08-08
在“vue学习笔记1”中，我们主要探讨了在Vue环境中设置登录页面的过程，包括背景色设置、登录框样式、全局样式配置以及Less loader的安装和使用。 首先，Vue CLI是Vue项目的基础脚手架，它提供了一种快速初始化项目...
react 学习笔记
11-16
React 学习笔记 React 是一个流行的前端框架，用于构建用户界面。学习 React 需要掌握其核心概念，包括组件生命周期、状态管理、事件处理等。本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命...
typora学习的前端笔记
07-06
这个压缩包包含了一系列与前端开发相关的学习笔记。 【描述】中的"typora学习的前端笔记"暗示了这些文档是使用Typora编辑器编写的，可能涵盖了作者在学习前端技术过程中的一些关键点和理解，旨在帮助读者更好地理解...
Babel安装步骤（JavaScript编译器）
ZH
07-17 8974
首先需要安装node.js按照官网‘下一步’就行 1.npm init 初始化 2.安装依赖包 npm install --save-dev @babel/core @babel/cli 如果说提示babel不是命令，可以全局安装npm install --global @babel/core @babel/cli 3.运行babel src -d lib 或者在package.json中配置sc...
Babel 7的使用和说明
lvxinaidou的博客
10-25 574
前端代码兼容Chrome 44,Babel 7的使用和说明 问题 目前公司多数测试同感云平台的浏览器一般是Chorme 77，现遇到特殊情况，必须要在Chorme 44上运行平台，因为浏览器版本低，会报错： 网上大致查看了一下错误原因，是es6语法出错，可能因为Chorme 44版本太低，不支持es6的语法。奇怪的一点，之前已经用过babel-loader模块转换过代码，但还存在一兼容问...
Babel是什么？
q850593913的博客
02-09 400
-----------------------------------------------2021.02.09--------------------------------------------- 本文章包含的内容 了解全局 - Babel的作用是什么？ 学习范围 - Babel的使用方式、配置、Plugins和Presets的区别、preset-env的作用 1. Babel的作用是什么？ 首先要明白ES6的语法比如箭头函数在旧版本浏览器因为兼容问题是无法运行的 所以要想办法对旧版本浏览器进
Babel基础入门
最强菜鸟
02-04 2419
Babel基础入门说明一、入门系列（1）概述（2）demo1、初始化package文件2、安装babel命令行工具3、安装babel转译器4、配置.babelrc文件5、创建要转译的js文件6、开始编译 说明 更新时间:2022-02-03 本文主要基于babel官网进行学习，同时综合了网上的很多相关教程，本文会持续更新，不断地扩充 本文仅为记录学习轨迹，如有侵权,联系删除 注意：学习本文之前建议先具备有ES6与js相关知识，本文主要基于babel官网进行学习，地址：https://www.babeljs.
Babel7
花铛
03-22 761
Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 代码，以便能够在旧版本的浏览器或其他环境中运行。但是，Babel 本身是无法转换代码的，它的转换功能是通过不同的插件来实现的，Babel 插件是用于指定转换规则的工具，每个插件都可以处理不同的语法或功能转换。Babel 本身就是一个可以独立使用的工具，但是目前开发中很少直接使用 Babel，都是和 Webpack 等构建工具来配合使用。
babel练习：将es6+语法转换为浏览器兼容的语法
SignalFire的博客
04-07 1307
1.创建babel-demo文件夹 2.cmd命令行初始化此项目 命令行键入：npm init 3.创建src.js文件作为源文件，内写ES6语法的代码 src.js var x = 2 ** 3; x **= 3; console.log(x); 4.安装babel插件 命令：npm install --save-dev @babel/plugin-transform-exponentiation-operator 5.在package.json中新增命令babel-.
webpack基础(四)——babel
weixin_47450807的博客
01-29 3202
一、babel介绍 在开发中我们经常使用ES6+，typescript等语法，但是在打包后，这些代码浏览器不能识别，所以此时我们使用babel来解决该问题。 babel定义：babel是一个工具链主要用于将ES6+语法兼容老版本的浏览器。 二、babel简单使用 babel是一个独立的工具，可以不在webpack中使用。 @babel/core：babel核心代码必须安装 @babel/cli:在命令行执行babel代码 npm install @babel/core @babel/cli -D //需要转
Babel 7
风火一回，一生不毁
06-02 838
Babel-7 babel是一个工具链，其主要用于将ES5以上对的版本代码转化为向下兼容的JavaScript语法。 本文是针对babel7.10.0讲解的 创建测试项目 mkdir babel-test cd babel-test npm init 在babel-test根目录下创建.babelrc文件，用于配置babel。 babel命令会从当前编译文件依次向上查找，直到找到.babelrc或babel.config.js为止。 在根目录下新建source-code目录用于存放源码。
不容错过的 Babel7 知识
祈澈菇凉
02-23 648
对 Babel 的配置项的作用不那么了解，是否会影响日常开发呢？老实说，大多情况下没有什么影响。不过呢，还是想更进一步了解下，于是最近认真阅读了 Babel 的文档，外加不断编译验证，输出...
关于前端大管家 package.json，你知道多少？
前端小白-Mr鹏帅
11-04 1237
今天来看看前端的大管家package.json文件相关的配置，充分了解这些配置有助于我们提高开发的效率，规范我们的项目。文章内容较多，建议先收藏在学习！ 在每个前端项目中，都有package.json文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。package.json文件是一个JSON对象，该对象的每一个成员就是当前项目的一项设置。package.json作为前端的大管家，到底有哪些配置和我们的日常开发密切相关？下面就来仔细剖析一下这个文件。 当我们搭建一个新项目时，往往
kali安装node-babel7
最新发布
07-25
要在 Kali Linux 中安装 Node.js 和 Babel 7，可以按照以下步骤进行操作： 1. 打开终端，并以管理员权限登录到 Kali Linux。 2. 首先，确保你的系统已经安装了 Node.js。运行以下命令来检查是否已安装 Node.js： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值