前端工程化-babel、corejs、postcss

出处：前端工程化-babel、corejs、postcss | 刘维_个人博客_编程秘籍_开发技巧_入门到精通_生活感悟 (ldlw.site)

一. 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

const x = [1, 2, 3]
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

.display {
  display: flex; /* 希望加上前缀 */
  color: oklch(61% 0.2 29); /* 很新的css函数 颜色空间 亮度 色相 饱和度 */
}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)
})