JavaScript转板器和ESLINT并不完美
#javascript #transpiler #eslint

概括

  • 即使使用转介剂,并不是所有的ecmasixt描述都可以转换
  • 即使使用Eslint,也不是所有的ecmascript描述都可以被覆盖

检查!

使用ecmascript时,转Piler转换了什么,它解析了什么?

  • 验证转板器转换的内容及其忽略的内容
  • 验证Eslint解析什么及其忽略的内容

cc-kawakami/transpilers-and-eslint-are-not-perfect

验证的输入

  • 基于ESNEXT标准的ES6的代码示例
  • 选择您可能有机会使用的功能
/** 
 * ES2015
 * ------------------------------------------------
 */
/** const, let */
const cst = 1
let lt = 2
console.log(cst)
console.log(lt)

/** Allow function */
const fn = () => {
  console.log('fn')
}

/** classes */
class Hoge {
  fuga () {
    console.log('fuga')
  }
}

/** 
 * ES2016
 * ------------------------------------------------
 */
/** Array.prototype.includes */
const array = [1, 2, 3, 4, 5]
console.log(array.includes(2))

/** power operator */
console.log(2**2)

/**
 * ES2017
 * ------------------------------------------------
 */
/** Async functions */
async function log () {
  console.log('hoge')
}

/** Object.values() */
const obj = { hoge: 0, fuga: 1, piyo: 2 }
console.log(Object.values(obj))

/**
 * ES2018
 * ------------------------------------------------
 */
/** Spread Properties */
const hoge = { fuga: 'piyo' }
console.log({ .... .hoge })

/** RegExp named capture groups */
console.log(/(? <year>[0-9]{4})year/.test('2021'))

/** RegExp Lookbehind Assertions */
console.log(/(? <=[0-9]+)\. [0-9]+/.test('.34'))

/**
 * ES2019
 * ------------------------------------------------
 */
/** flat array methods */
console.log([[1, 2], 3, 4].flat())

/**
 * ES2020
 * ------------------------------------------------
 */
/** Optional chaining operator */
console.log(hoge?.fuga)

/**
 * ES2021
 * ------------------------------------------------
 */
/** Logical assignment operators */
console.log(a ||= b)

/** Numeric separators */
console.log(100_000_000)

/**
 * ESNext
 * ------------------------------------------------
 */
/** static class field */
class Foo {
  static bar = 1
}

console.log(Foo.bar)

目标转板器和设置

名称 目标
1 babel /保守< / td> - (> 1% in JP
2 Babel / Progressive < / td> - (> 5% in JP
3 esbuild / default < / td> esnext
4 esbuild / to ES2017 < / td> ES2017
5 汇总 不transpile
6 crolup-plugin-esbuild ES2017
7 打字稿 /默认值< / td> ES3
8 typescript / to ES2017 < / td> ES2017

检查结果。

描述并非由所有transpiles转换

  • REGEXP命名捕获组(ES2018)
  • Regexp LookBehind断言(ES2018)
  • 平面阵列方法(ES2019)

无法用ESLINT验证的描述

  • 平面阵列方法(ES2019)

我注意到的其他事情

  • Esbuild默认情况下减少注释。

(额外)执行时间

名称 目标 时间
1 babel /保守< / td> - (> 1% in JP 0.63
2 Babel / Progressive < / td> - (> 5% in JP 0.53
3 esbuild / default < / td> esnext 0.31
4 esbuild / to ES2017 < / td> ES2017 0.18
5 汇总 不transpile 0.20
6 crolup-plugin-esbuild ES2017 0.27
7 打字稿 /默认值< / td> ES3 1.21
8 typescript / to ES2017 < / td> ES2017 1.36

参考