摘要: Creational patterns provide object creation mechanisms that increase flexibility and reuse of existing code. Factory method: Provides an interface for 阅读全文
posted @ 2024-01-23 15:11 Zhentiw 阅读(6) 评论(0) 推荐(0) 编辑
摘要: Just for fun... Given a number (always positive) as a type. Your type should return the number decreased by one. For example: type Zero = MinusOne<1> 阅读全文
posted @ 2022-10-07 22:57 Zhentiw 阅读(42) 评论(0) 推荐(0) 编辑
摘要: Blog: https://www.geeksforgeeks.org/es6-trampoline-function/ Stackoverflow problem for recursion: const sumBelow = (number, sum = 0) => ( number 0 ? s 阅读全文
posted @ 2022-08-18 14:32 Zhentiw 阅读(33) 评论(0) 推荐(0) 编辑
摘要: Serverless framework with AWS Link to each sections Table of Content: Part 0: Serverless Project structure Part 1: DynamoDB & ApiGateway Part 2: Event 阅读全文
posted @ 2021-05-17 15:15 Zhentiw 阅读(148) 评论(0) 推荐(0) 编辑
摘要: Storage Services: S3 Glacier CloudFront Elastic Block Store (EBS) Storage Gateway Snow family Database Overview Block storage: Used on local networks 阅读全文
posted @ 2021-03-15 03:06 Zhentiw 阅读(146) 评论(0) 推荐(0) 编辑
摘要: S3 Features Prefiees and delimiters For example: the file name in S3 can be: `marking/plans/kpi_2021_1.pdf`. The point is make it looks like a folder 阅读全文
posted @ 2021-03-12 17:34 Zhentiw 阅读(136) 评论(0) 推荐(0) 编辑
摘要: In our previous code, we have seen this partten for operators: // #region operators const concat = curry((broadcaster, listener) => { let string = ''; 阅读全文
posted @ 2020-10-25 21:54 Zhentiw 阅读(151) 评论(0) 推荐(0) 编辑
该文被密码保护。 阅读全文
posted @ 2020-05-07 18:22 Zhentiw 阅读(0) 评论(0) 推荐(0) 编辑
摘要: Generators can yield promises which can work with the "for await of" loop syntax. This lesson shows how all the pieces fit together and explains why t 阅读全文
posted @ 2020-03-22 02:59 Zhentiw 阅读(161) 评论(0) 推荐(0) 编辑
摘要: In this post, we are going to see how to use Ramda Lens. For example, we have data: R.lens: R.lens takes a getter and a setter: R.lensProp: There is a 阅读全文
posted @ 2019-02-24 20:12 Zhentiw 阅读(704) 评论(0) 推荐(0) 编辑
摘要: Just like the State ADT an Array is also an Applicative Functor. That means we can do the same tricks with liftA2 with Array that we have been doing w 阅读全文
posted @ 2019-01-16 16:30 Zhentiw 阅读(708) 评论(0) 推荐(0) 编辑
摘要: Use custom Cypress command for reusable assertions We’re duplicating quite a few commands between the registration and login of our user for assertion 阅读全文
posted @ 2018-12-06 21:13 Zhentiw 阅读(432) 评论(0) 推荐(0) 编辑
摘要: Use Cypress to test user registration Let’s write a test to fill out our registration form. Because we’ll be running this against a live backend, we n 阅读全文
posted @ 2018-12-05 15:54 Zhentiw 阅读(352) 评论(0) 推荐(0) 编辑
摘要: Despite the fact that Cypress is an application that runs natively on your machine, you can install it and add it as a dependency just like all other 阅读全文
posted @ 2018-12-05 02:38 Zhentiw 阅读(567) 评论(0) 推荐(0) 编辑
摘要: Ensure Functions are Called Correctly with JavaScript Mocks Often when writing JavaScript tests and mocking dependencies, you’ll want to verify that t 阅读全文
posted @ 2018-11-06 04:25 Zhentiw 阅读(429) 评论(0) 推荐(0) 编辑
摘要: 1. Color Picker (Chrome) You might know how to use color picker in Chrome, recently there is a feature inside color picker which is "Contrast Ratio", 阅读全文
posted @ 2018-07-15 18:41 Zhentiw 阅读(234) 评论(0) 推荐(0) 编辑
摘要: We'll examine how to unnest function calls, capture assignment, and create a linear data flow with a type we call Box. This is our introduction to wor 阅读全文
posted @ 2016-12-11 21:47 Zhentiw 阅读(326) 评论(0) 推荐(0) 编辑
摘要: Well, this stuff will be a little bit strange if you deal with it first time. Container Object: Just a wrapper / contianer for values No Method No Nou 阅读全文
posted @ 2016-09-06 04:23 Zhentiw 阅读(335) 评论(0) 推荐(0) 编辑
摘要: First, what is 'High Order function', basic just a function, inside the function return another fuction. For example: Decorators is a subset of high o 阅读全文
posted @ 2016-06-14 03:10 Zhentiw 阅读(373) 评论(0) 推荐(0) 编辑
摘要: Somehow it looks like reflect in Java. For example: We define an mothod on the Object, it called defineMethod(). It accepts two arguements, one is met 阅读全文
posted @ 2016-05-02 03:06 Zhentiw 阅读(377) 评论(0) 推荐(0) 编辑

配置文件

  • 配置文件格式
  • 配置文件选项

配置文件的格式

在 babel 中,配置文件本身又可以分为两种:

  • 项目范围的配置文件
  • 文件相关配置文件

项目范围配置文件

顾名思义,就是该配置文件针对整个项目生效的一个配置,这种类型的配置文件一般放在项目根目录下面,babel 对项目范围级别的配置文件是有格式要求的,一般是指 babel.config.* 这种格式的配置文件,后面的 * 支持各种类型的扩展名:.json .js .cjs .mjs .cts ...

  • babel.config.js ✅
  • babel.config.json ✅
  • .babelrc ❌

文件相关配置文件

这种类型的配置文件就是对特定的文件或者特定的目录以及子目录生效。在 babel 中,如下格式的配置文件是文件级别:

  • .babelrc.* (.json .js .cjs .mjs .cts)
    • .babelrc.js
    • .babelrc.json
  • .babelrc
  • package.json 文件里面的 babel 键

接下来我们来看一个结构示例:

/my-project
|-- frontend
|   |-- .babelrc.json
|   |-- src
|-- backend
|   |-- .babelrc.json
|   |-- src
|-- babel.config.json

假设 babel.config.json 配置如下:

{
  "presets": [
    "@babel/preset-env"
  ]
}

上面配置文件中所指定的预设,会在整个项目中国都被用到。

假设 frontend/.babelrc.json 有如下的配置:

{
  "plugins": [
    "@babel/plugin-transform-react-jsx"
  ]
}

该配置就只会在 frontend 目录范围内生效。babel 在对 frontend 目录下的文件进行编译的时候,会自动的去合并多个 babel 配置文件,最终 frontend 目录下的文件在进行编译的时候,就会使用 @babel/preset-env 预设以及 @babel/plugin-transform-react-jsx 这个插件。

配置文件选项

有关 babel 配置文件所支持的配置项有哪些,可以在官网的 https://babeljs.io/docs/options 看到。

所支持的配置项还是比较多,官方进行一个简单的分类:

  • 主要选项
  • 配置加载选项
  • 插件和预设配置
  • 输出目标选项
  • 配置合并选项
  • 源码映射选项
  • 其他选项
  • 代码生成器选项
  • AMD / UMD / SystemJS 选项
  • 选项概念

这里我们不需要一开始就对所有的配置项完全掌握,下面我们就介绍一些常见的配置项。

插件和预设配置

  • plugins:对应的值为一个数组,配置要使用的插件,可以配置多个,注意在配置文件中配置的插件需要提前进行安装
{
  "plugins": [["@babel/plugin-transform-arrow-functions", {}]]
}
  • presets:配置一个预设,对应的值也是一个数组,表示可以配置多个
{
  "presets": ["@babel/preset-env"]
}

输出目标选项

  • targets: 该配置项目用于指定要兼容的浏览器版本范围
{
  "targets": "> 0.25%, not dead"
}

关于指定浏览器范围,有多种多样的形式,例如可以在项目根目录下创建一个 .browserslistrc 配置文件来指定范围,也可以在 package.json 中通过 browserslist 这个键来指定范围。

优先级顺序如下:

  1. targets
  2. .browserslistrc
  3. package.json
  • browserlistConfigFile:默认值是 true,表示允许 babel 去搜寻项目中和 browserlist 相关的配置。例如 babel 配置文件中没有 targets 的配置,但是项目中有 .browserslistrc 这个文件,里面指定了浏览器范围,那么 babel 在进行编译的时候,会去搜索和 browserlist 相关的配置,并在编译的时候应用对应的浏览器范围配置。这个配置对应的值还可以是一个字符串形式的路径,该路径就指定了具体的 browserlist 文件的位置
{
  "presets": [
    ["@babel/preset-env", {
      "browserslistConfigFile": "./.browserslistrc"
    }]
  ]
}

配置合并选项

  • extends:允许你扩展其他的 babel 配置文件,你可以提供一个路径,该路径对应的 babel 配置文件就会作为基础的配置
{
  "extends": "./base.babelrc.json"
}
  • env:为你不同的环境提供不同的配置,例如在开发环境或者生成环境需要使用不同的插件或者预设,那么就可以通过 env 来指定环境。
{
  "env": {
    "development": {
      "plugins": ["pluginA"]
    },
    "production": {
      "plugins": ["pluginB"]
    }
  }
}
  • overrides :该配置项用于对匹配上的特定文件或者目录应用不同的配置
    • test:做匹配
    • include:包含哪些目录
    • exclude:排除哪些目录
{
  "overrides": [
    {
      "test": ["*.ts", "*.tsx"],
      "exclude": "node_modules",
      "presets": ["@babel/preset-typescript"]
    }
  ]
}
  • ignore 和 only :ignore 控制忽略文件,only 指定特有文件
{
  "ignore": ["node_modules"],
  "only": ["src"]
}

源码映射选项

  • sourceMaps:告诉 babel 是否要生成 source map
{
 "sourceMaps": true
}
  • sourceFileName:指定 source map 文件的文件名
{
 "sourceFileName": "customFileName.js"
}
  • sourceRoot:source map 文件对应的 URL 前缀
{
  "sourceMaps": true,
  "sourceRoot": "/root/path/to/source/files/" // 前缀
}

其他选项

  • sourceType:指定 babel 应该如何去解析 js 代码

    • module:如果你的代码使用的 ESM 模块化,里面涉及到了 export 、import,那么应该指定为这个值
    • script:普通的 JS 脚本,没有使用模块化
    • unambiguous:让 babel 自己来判断,babel 检查到你的代码使用了 export 、 import,就会视为模块文件,否则就会视为普通的 script 脚本
  • assumptions:从 babel 7.13.0 开始引入的一项配置项,让开发者对自己的代码做一个假定(更像是对 babel 的一个承诺)

{
  "assumptions": {
    "noClassCalls": true
  }
}

上面配置表示我的代码中不会直接调用类(不会像调用函数一样去调用类),babel 就可以省略生成检查类是否被正确调用的代码。

posted @ 2025-01-16 21:01 Zhentiw 阅读(2) 评论(0) 推荐(0) 编辑
摘要: APIs 关于 babel 里面的 APIs 主要位于 @babel/core 这个依赖里面,你可以在官网左下角的 Tooling Packages 分类下找到这个依赖包。 这里顺便介绍一下每一种依赖包的作用: @babel/parser: 是 Babel 的解析器,用于将源代码转换为 AST。 @ 阅读全文
posted @ 2025-01-16 20:58 Zhentiw 阅读(2) 评论(0) 推荐(0) 编辑
摘要: 使用插件 在 babel 要使用一个插件,步骤实际上非常简单,就分为两步: 安装插件 在配置文件或者 CLI 中指定插件 举个例子,例如有一个专门将箭头函数转为普通函数的插件: pnpm add @babel/plugin-transform-arrow-functions -D 之后在配置文件中进 阅读全文
posted @ 2025-01-16 20:53 Zhentiw 阅读(4) 评论(0) 推荐(0) 编辑
摘要: CLI 关于 babel 所提供的 CLI,你可以在 https://babeljs.io/docs/babel-cli 看到所有所支持的 CLI 命令。 要使用 CLI 命令,首先第一步是安装: pnpm add --save-dev @babel/core @babel/cli 注意在安装 @b 阅读全文
posted @ 2025-01-16 20:48 Zhentiw 阅读(1) 评论(0) 推荐(0) 编辑
摘要: Babel介绍 Babel 是一个编译器,主要用于将最新的 JavaScript 代码转化为向后兼容的代码,以便在老版本的浏览器或环境中运行。 例如,你可能在开发时使用了 ES6、ES7 或者更高级的 JavaScript 特性,但是有些浏览器可能并不支持这些新特性,这时就可以用 Babel 来将代 阅读全文
posted @ 2025-01-16 20:40 Zhentiw 阅读(1) 评论(0) 推荐(0) 编辑
摘要: 检查规则 这节课我们主要学习 ESLint 里面的规则相关的知识。规则是 ESLint 中一个比较重要的核心概念之一,因为究竟报不报错,是由规则来确定的。 规则的重要性 在 ESLint 中,本身可以配置规则的重要性,总共分为三个级别: off 或者 0: 关闭这条规则 warn 或者 1:这条规则 阅读全文
posted @ 2024-12-26 14:59 Zhentiw 阅读(15) 评论(0) 推荐(0) 编辑
摘要: Make an HTML table more readable on mobile devices by using the ::before pseudo-element. We add labels to each cell, so they appear like cards when th 阅读全文
posted @ 2024-12-23 16:30 Zhentiw 阅读(10) 评论(0) 推荐(0) 编辑
摘要: It's fairly trivial to create a React project, but there's always a big hurdle between creating it locally and making it shareable so that someone els 阅读全文
posted @ 2024-12-23 16:10 Zhentiw 阅读(7) 评论(0) 推荐(0) 编辑
摘要: Validating at form level Now that we know how to validate a single input field in our forms, let’s take it a step further and learn how to set up our 阅读全文
posted @ 2024-12-21 19:47 Zhentiw 阅读(9) 评论(0) 推荐(0) 编辑
摘要: Appropriate types In HTML we have a wide variety of input elements to craft our forms, but one element in particular rules them all. The catch-all inp 阅读全文
posted @ 2024-12-21 19:39 Zhentiw 阅读(9) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示