一. babel和corejs的作用到底是什么
脑子里面的想法 es6 -> es5
es6里面其实有两种东西 语法 新特性
转的语法
const a = 1
const b = （） => 123
... //解构 属于新语法
二. index.js
Promise.resolve(1).then((res) => console.log(res))
Object.assign({}) // 这些新特性是不会进行代码转换的 所以大家不要搞错
大家不信的话简单编写一个babel
在我的工程项目里面进行演示
先安装核心库 cnpm i @babel/core
在package.json 改 "type": "module"
再安装核心库 cnpm i @babel/preset-env
三. babe.js
1. es6 => es5
import babel from "@babel/core" import fs from 'node:fs' import presetEnv from "@babel/preset-env" const code = fs.readFileSync('./index.js', 'utf-8') // 不加utf-8是字符串 // console.log(code) // 同步转换 第二个参数是一个预设 babel.transformAsync(code, { presets: [presetEnv] }).then((res) => { console.log(res.code) // es6 => es5 })CopyCopy
core-js 新的api怎么处理 会提供polyfill 也就是一个垫片
2. 原理
'Promise' in window 没有的话 在代码里面手写一个promise去用
'find' in Array.prototype 有没有 没有的话 在代码里面也是去手写一个
变成一个二维数组 cnpm i core-js
import babel from "@babel/core" import fs from 'node:fs' import presetEnv from "@babel/preset-env" const code = fs.readFileSync('./index.js', 'utf-8') // 不加utf-8是字符串 // console.log(code) // 同步转换 第二个参数是一个预设 babel.transformAsync(code, { presets: [[ presetEnv, { useBuiltIns: 'usage', // 新特性会按需引入 垫片 corejs: 3 } ]] }).then((res) => { console.log(res.code) // es6 => es5 })CopyCopy
1. const x = [1, 2, 3] 2. const y = x.filter(item => item > 1)CopyCopy
babel转语法的 core-js通过一个垫片 兼容这个新特性 所以大家这个babel千万不要搞混了
四. postcss的作用到底是什么
// babel + corejs 上一节已经将了这个 babel es6转es5 corejs兼容js的新特性
// babel 转换大概流程 js => AST(抽象语法树) => transform => generated code
// postcss 类似 js => AST(抽象语法树) => transform => generated code
他本身是一个工具 并不会做什么的
只是帮我提供这个过程 过程中间进行加工 比如加前缀 比如-ms -webkit -moz 兼容各种浏览器
只是提供这些 功能 插件由我们自己编写
官网 PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS中文网
加前缀 转换新特性 都是postcss带给我们的 我们简单的去实现一下它的相关功能
1. index.css
1. .display { 2. display: flex; /* 希望加上前缀 */ 3. color: oklch(61% 0.2 29); /* 很新的css函数 颜色空间 亮度 色相 饱和度 */ 4. }CopyCopy
cnpm i postcss
cnpm i autoprefixer
cnpm i postcss-preset-env
处理新特性 跟babel是一样的 也叫 preset env
package.json 设置module
2. index.js
import postcss from "postcss" import autoprefixer from "autoprefixer" import postcssEnv from "postcss-preset-env" import fs from "node:fs" const css = fs.readFileSync('./index.css', 'utf-8') // 插件塞进去 postcss([postcssEnv({ browsers: 'last 2 versions' // 兼容最近的2个浏览器版本 }), autoprefixer]).process(css, { from: './index.css' }).then(res => { console.log(res.css) })
