Babel은 하위 버전의 브라우저와 호환됩니다.

Language 2023-09-18 23:49:56 views: null

기사 디렉토리

1. 웹팩 프로젝트 구축

  1. npm init프로젝트를 초기화하고 Enter 키를 끝까지 누르세요.
│  └─ package.json
  1. webpack与webpack-cli설치하다

    주문 실행npm i webpack webpack-cli -D

│  ├─ package.json
│  ├─ node_modules // webpack-cli创建
  1. 컴파일 템플릿을 설치하고 시작 및 종료 파일을 구성합니다.
  1. 컴파일 템플릿 설치npm i html-webpack-plugin

프로젝트 구조

│     ├─ build 
│     │  ├─ build.js
│     │  └─ index.html
│     ├─ node_modules
│     └─ src
│        ├─ index.js | main.js
│     ├─ index.html // 入口文件
|     ├─ package.json
|     ├─ webpack.config.js
  • webpack.config.js새 항목 파일 구성 index.js, 파일 내보내기build
const path = require('path')
// 模板编译
const HtmlWeabpckPlugin = require("html-webpack-plugin")
module.exports = {
    
    
	mode: 'development',
	devtool: false,   // 取消eval且不生成soucremap,代码清晰不转换
	entry: './src/index.js',
	output: {
    
    
		path: path.resolve(__dirname, './build'),
		filename: 'bundle.js',
		// 重新打包时, 先将之前打包的文件夹删除掉
		clean: true
	},
	resolve: {
    
    
		extensions: ['.js', '.json', '.wasm', '.jsx', '.ts']
	},
	module: {
    
    
	},
	plugins: [
		new HtmlWeabpckPlugin({
    
    
			template: "./index.html"
		})
	]
}
  • package.json 패키징 명령 수정
  "scripts": {
    
    
    "build":"webpack"
  },
  1. 구성 webpack-dev-server핫 업데이트

설치하다npm i webpack-dev-server -D

개정하다package.json

 "scripts": {
    
    
    "build": "webpack",
    "serve": "webpack serve"
  },

2. 바벨 명령줄 사용

  • Babel 자체는 postcss와 같은 독립적인 도구로 사용할 수 있으며, webpack 및 기타 빌드 도구와 함께 구성하지 않고도 단독으로 사용할 수 있습니다.
  • 명령줄에서 babel을 사용하려면 라이브러리를 설치해야 합니다.
    • @babel/core: 반드시 설치해야 하는 바벨의 핵심 코드입니다.
    • @babel/cli: 명령줄에서 babel을 사용할 수 있게 해줍니다.
 安装 npm install @babel/cli @babel/core
  1. 바벨을 사용하여 작성된 ES6 코드 처리
   src：是源文件的目录；
   --out-dir：指定要输出的文件夹dist；
   npx babel src --out-dir dist
  • 구현하다npx babel ./src/index.js --out-dir dist

dist코드가 폴더 에 출력되지만 다운그레이드되지는 않습니다.

여기에 이미지 설명을 삽입하세요.

  • 上述代码没有降级是因为babel在这里只进行了抽象语法解析
  • 코드를 다운그레이드하려면 플러그인을 사용해야 합니다.plugin

npm install @babel/plugin-transform-block-scoping -D 플러그인을 설치하세요.

  • 명령 실행npx babel ./src/index.js --out-dir dist --plugins=@babel/plugin-transform-block-scoping
  • es6이때 코드의 const는 var로 변환 됩니다.
    여기에 이미지 설명을 삽입하세요.

3. Babel의 기본값과 컴파일러 프로세스

  • 위 코드를 사용하면 es6을 es5로 변환할 수 있으나 변환할 내용이 너무 많아 하나하나 설정하는 것이 귀찮습니다.（preset）
  1. 설치하다npm install @babel/preset-env -D
  2. 사용npx babel ./src/index.js --out-dir dist --presets=@babel/preset-env
  • 코드 변환 및 자동으로 엄격 모드 켜기
    여기에 이미지 설명을 삽입하세요.

4. 바벨 프로젝트의 구성

4.1 바벨로더 및 플러그인 사용

  • 실제 개발에서는 일반적으로 webpack 등의 빌드 도구에서 babel을 구성하여 사용합니다.
  1. 종속성 설치npm install babel-loader @babel/core
  2. webpack에서 플러그인 구성 및 지정
  • 구성 추가
module: {
    
    
		rules: [
			{
    
    
				test: /\.m?js$/,
				use: {
    
    
					loader: "babel-loader",
					options:{
    
    
						plugins: [
							"@babel/plugin-transform-block-scoping",
						]
					}
				}
			}]
	},

여기에 이미지 설명을 삽입하세요.

4.2 babel-preset사용

  • 위 코드에서 따로 구성하기에는 너무 번거롭기 때문에 직접 주셔도 됩니다 webpack提供一个preset.webpack会根据我们的预设来加载对应的插件列表，并且将其传递给babel

  • 설치하다npm install @babel/preset-env

  • 수정 plugin중인 구성
	rules: [
			{
    
    
				test: /\.m?js$/,
				use: {
    
    
					loader: "babel-loader",
					options: {
    
    
						presets:[
							["@babel/preset-env"]
						]
					}
				}
			}]

5. 브라우저 호환성

  • 코드를 변환해야 하는지 여부는 해당 브라우저에 따라 다릅니다.
  • bowserlistrc파일 파싱
    여기에 이미지 설명을 삽입하세요.
> 0.05%   表示现在使用的游览器市场占有率   （这里默认值是0.5%, 0.1%可兼容谷歌游览器79 ）
last 2 versions     表示最近的两个版本
not dead     //表示最近24个月浏览器是否进行更新

5.1 브라우저 목록 도구 및 작성 규칙

  • browserslist工具구성된 호환성 조건은 CSS 호환성 및 JS 호환성에서 공유될 수 있습니다.
  • 조건이 설정된 경우: > 1%;는 css要兼容市场占有率大于1%的浏览器，js也要兼容市场占有率大于1%的浏览器;를 의미합니다.
  • 규칙 작성
    여기에 이미지 설명을 삽입하세요.
    여기에 이미지 설명을 삽입하세요.
  • 명령줄 사용법browserslist

npx browserslist ">1%, last 2 version, not dead"

5.2 브라우저 목록 구성

  1. package.json에서 구성 할 수 있습니다.
  2. 파일 .browserslistrc에서 구성
> 5%
last 2 versions
not dead

여기에 이미지 설명을 삽입하세요.

  • 여러 구성 간의 조건부 관계
    여기에 이미지 설명을 삽입하세요.
  • 注意多个游览器兼容配置生效规则
  • 여기에서 구성하는 내용은 파일 구성을 target직접 덮어씁니다 .browserslistrc
		rules: [
			{
    
    
				test: /\.m?js$/,
				use: {
    
    
					loader: "babel-loader",
					options: {
    
    
						presets: [
							["@babel/preset-env",{
    
    
								targets: ">5%"
							}]
						]
					}
				}
			}]

5.3 babel의 구성 파일 최적화

  • 현재 프로젝트는 babel的配置信息放到一个独立的文件中Babel을 사용하여 두 가지 구성 파일을 제공하는 것입니다.

    • babel.config.json(또는 .js, .cjs, .mjs) 파일
    • babelrc.json(또는 .babelrc, .js, .cjs, .mjs) 파일;

  • 둘 사이의 차이점은 무엇입니까? 현재 많은 프로젝트가 다중 패키지 관리 방법을 채택하고 있습니다.（babel本身、element-plus、umi等）

    • .babelrc.json: 초기에는 더 많은 구성 방법을 사용했지만 Monorepos 프로젝트를 구성하는 것이 더 번거롭습니다.
    • babel.config.json(babel7): Monorepos 프로젝트의 하위 패키지에 직접 적용할 수 있어 더욱 권장됩니다.
  • json与js的文件配置只是写法不同而已，功能一致
module.exports = {
    
    
	presets: [
		["@babel/preset-env", {
    
    
		}
		]
	]
}

6.polyfill

  • polyfill 其实就是给代码打一个补丁, JavaScript를 더 잘 사용하는 데 도움이 될 수 있습니다.
  • 폴리필을 사용하는 이유는 무엇입니까?
    • 예를 들어, 우리는 몇 가지 문법적 특징(例如：Promise, Generator, Symbol等以及实例方法例如Array.prototype.includes等
    • 그러나 일부는 浏览器压根不认识这些特性필연적으로 오류를 보고합니다.
      여기에 이미지 설명을 삽입하세요.

注意点이전에는 babel7.4.0사용할 수 있었지만 @babel/polyfill的包이제 이 패키지는 더 이상 사용되지 않습니다.

  • babel7.4.0core-js和regenerator-runtime来이후 완료된 사용법을 별도로 소개할 수 있습니다 polyfill.

npm install core-js 재생성기-런타임 --저장

  1. 구성babel.config.js
    • useBuiltIns: 폴리필 사용 방법을 설정합니다.
    • corejs: corejs 버전을 설정합니다. 현재는 3.x 버전을 더 많이 사용하고 있습니다. 예를 들어 저는 3.8.x 버전을 사용합니다.
      • 또한, corejs는 제안 단계에서 기능을 지원할지 여부를 설정할 수 있습니다.
      • 제안 속성을 true로 설정하기만 하면 됩니다.

6.1 useBuiltIns 속성 설정

  1. fasle 값, 기본값이 설정되지 않았습니다.
    • 패키지된 파일은 적응을 위해 폴리필을 사용하지 않으며 현재로서는 corejs 속성을 설정할 필요가 없습니다.
  2. usage
    • 필요한 폴리필은 소스 코드에 나타나는 언어 기능을 기반으로 자동으로 감지됩니다. 이를 통해 최종 패키지의 폴리필 수가 최소화되고 패키지된 패키지가 상대적으로 작아집니다.
  • 설정되지 않음
    여기에 이미지 설명을 삽입하세요.
  • 설정
    여기에 이미지 설명을 삽입하세요.
  1. 기입
    • 의존하려는 라이브러리가 특정 폴리필 기능을 사용하지만 우리가 이를 사용하고 있기 때문에 usage나중에 사용자의 브라우저에서 오류를 보고할 수 있으므로 이를 사용할 수 있습니다 entry.
// 入口文件引入
import 'core-js/stable';
import 'regenerator-runtime/runtime';
  • 전체 구성
module.exports = {
    
    
	presets: [
		["@babel/preset-env", {
    
    
			// corejs:3,
			// useBuiltIns:false   // 默认值就是不使用polyfill
			// corejs:3,
			// useBuiltIns:"usage"   //自动检测需要的polyfill， 会把使用string的方法代码全部做个打包

			corejs: 3,
			useBuiltIns: "entry" // 解决 依赖的某一个库本身使用了某些polyfill的特性
			//  需要在入口文件中添加 `import 'core-js/stable'; import 'regenerator-runtime/runtime'
		}
		]
	]
}
  • 전체 프로젝트 디렉토리
│     ├─ build 
│     │  ├─ build.js
│     │  └─ index.html
|     ├─ dist 
│     ├─ node_modules
│     └─ src
│        ├─ index.js | main.js
│     ├─ index.html // 入口文件
|     ├─ package.json
|     ├─ webpack.config.js	
|     ├─.browserslistrc
|     ├─ babel.config.js

참고 기사

7. Babel은 타사 플러그인을 컴파일합니다.

7.1 반응 지원

설치하다npm i react react-dom

  • jsx문서 작성
import React, {
    
     memo } from 'react'
const app = memo(() => {
    
    
	return (
		<div>app</div>
	)
})
export default app
  • 플러그인 가져오기 react 与react-dom및 render마운트App
  • 注意~에 있다index.html 中创建类或者id标签
import React from 'react';
import ReactDom from 'react-dom/client';
import App from './react/app.jsx';

const Root = ReactDom.createRoot(document.querySelector('.root'))
Root.render(<App />)

npm install @babel/preset-react -D

module.exports = {
    
    
	presets: [
		["@babel/preset-env"],
		["@babel/preset-react"]
	]
}

7.2 TS 지원 TS-로더

  • 서문 TypeScript 컴파일러를 통해 이를 JavaScript로 변환할 수 있습니다.
npm install typescript -D
  • 또한 일반적으로 tsconfig.jsonTypeScript 컴파일 구성 정보를 위한 파일을 작성합니다.
tsc --init     // 生成tsconfig.json
  • npx tsc를 실행하여 자신만의 TS 코드를 컴파일할 수 있습니다.
  1. webpack에서 TypeScript를 사용하면 ts-loaderts 파일을 처리하는 데 사용할 수 있습니다.

npm install ts-loader -D 설치

  1. TS를 작성하여 사용
export const sum=(num1:number,num2:number)=>{
    
    
     return num1+num2
}
  1. 로더 및 패키지 구성
{
    
    
	test: /\.ts$/,
	use: {
    
    loader: "ts-loader",}
}
  1. 注意패키징 시 다음과 같은 오류가 발생하면 구성하세요.tsconfig.json
    여기에 이미지 설명을 삽입하세요.
  2. 4단계 오류 해결
  • 구현하다tsc --init
  • es 버전과 호환되는 구성

7.3 바벨의 TS 지원

  • 바벨로더 구성
{
    
    
	test: /\.ts$/,
	use: {
    
    
		loader: "babel-loader",
	}
  • 설치 @babel/preset-typescript및 구성

npm install @babel/preset-typescript -D

module.exports = {
    
    
	presets: [
		["@babel/preset-env"],
		["@babel/preset-react"],
		["@babel/preset-typescript"]
	]
}
  • ts-loader그리고 babel-loader선택
    • ts-loader(TypeScript 컴파일러)를 사용하여 TypeScript를 직접 컴파일하면 ts를 js로만 변환할 수 있습니다.
    • 이 프로세스에 해당 구문(Promise 및 포함과 호환 가능)을 추가하려는 경우 polyfillts-loader는 무력합니다.
      • 폴리필 채우기 기능을 완성하려면 바벨을 사용해야 합니다.
      • Babel-loader(Babel)를 사용하여 TypeScript를 직접 컴파일하거나 ts를 js로 변환하고 폴리필 기능을 구현합니다.
["@babel/preset-typescript",{
    
    
// corejs:3,
// useBuiltIns:"usage"
}]
  • babel-loader는 컴파일 과정에서 유형 오류를 감지하지 않습니다.
    • 실행 유형이 npm run type-check可以对ts代码감지됩니다.
    • 실행하다 npm run type-check-watch可以实时的检测类型错误;
"ts-check":"tsc --noEmit",
"ts-check-watch":"tsc --noEmit --watch"

Ich denke du magst

Origin blog.csdn.net/weixin_46104934/article/details/131750887
Empfohlen
Rangfolge
Täglich
Mehr
2024-06-02(0)
2024-06-01(1)
2024-05-31(2)
2024-05-30(0)
2024-05-29(1)
2024-05-28(1)
2024-05-27(1)
2024-05-26(0)
2024-05-25(1)
2024-05-24(13)

Code World

© 2018 codetd.com