概括
- 即使使用转介剂,并不是所有的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 |
参考
- ESLint - Pluggable JavaScript linter
- Babel - The compiler for next generation JavaScript
- esbuild - An extremely fast JavaScript bundler
- rollup.js
- egoist/rollup-plugin-esbuild: Use ESBuild with Rollup to transform ESNext and TypeScript code
- TypeScript: JavaScript With Syntax For Types.
- ES6 to ES10 (es2015 to es2019) Summary - Qiita