Babel は下位バージョンのブラウザと互換性があります

プログラミング 2023-09-18 23:49:51 訪問数: null

記事ディレクトリ

1. Webpackプロジェクトの構築

  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 コマンドラインの使用

  • Babel 自体は独立したツール (postcss など) として使用でき、webpack や他のビルド ツールで構成せずに単独で使用できます。
  • コマンドラインからbabelを使用してみたい場合は、ライブラリをインストールする必要があります
    • @babel/core: babel のコア コード。インストールする必要があります。
    • @babel/cli: コマンドラインで babel を使用できるようにします。
 安装 npm install @babel/cli @babel/core
  1. babel を使用して書かれた 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-b​​lock-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. babelプロジェクトでの設定

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.2babel-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 を使用して 2 つの構成ファイルを提供します。

    • 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 regenerator-runtime --save

  1. 構成babel.config.js
    • useBuiltIns: ポリフィルの使用方法を設定します。
    • corejs: corejs のバージョンを設定します。現在、3.x バージョンがより頻繁に使用されます。たとえば、私は 3.8.x バージョンを使用します。
      • さらに、corejs は提案段階で機能をサポートするかどうかを設定できます。
      • Proposal 属性を true に設定するだけです。

6.1 useBuiltIns属性の設定

  1. ファスル値、デフォルト値は設定されていません
    • パッケージ化されたファイルは調整にポリフィルを使用せず、現時点では 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-loader

  • TypeScript コンパイラーを使用して、これを JavaScript に変換できます。
npm install typescript -D
  • さらに、通常はtsconfig.jsonTypeScript コンパイル構成情報のファイルを作成します。
tsc --init     // 生成tsconfig.json
  • npx tsc を実行して独自の ts コードをコンパイルできます
  1. ts-loaderWebpack で TypeScript を使用する場合、 ts ファイルの処理に使用できます。

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 babel の 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 を使用する必要があります。
      • 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"

おすすめ

転載: blog.csdn.net/weixin_46104934/article/details/131750887
おすすめ
GitHub のホットリストに急上昇 — オープンソースのプログラミング言語とフレームワークは、どうしてこんなにも魅力的なのでしょうか?
北京ヒューマノイドロボットイノベーションセンターが、擬人化走行用の純粋な電気駆動を備えた世界初のフルサイズヒューマノイドロボット「Tiangong」を発売
ランキング
アリクラウドサーバ_ubuntu ECSシステムディスク拡張システム_
ボタンをクリックしてクリップボードにコピーします
脅威ハンティングを使用してサイバー セキュリティを強化する
ライン画像やコンテナnginxのの建設
Python での try の使用について書く
リアルタイムのデータウェアハウスを構築する方法高速データ時代、MySQLのAnalyticDBはあなたを教えて
Docker でのネットワークおよびデータ管理 (Docker Swarm クラスターおよび Docker データ管理を含む)
Java ループの比較: 従来の for ループ、拡張された for ループ、および forEach ループ
浙江大学版「C言語プログラミング（第3版）」演習2-18
Gestion du temps RTOS - Utilisation de la fonction de crochet SysTick pour réaliser l'échantillonnage de synchronisation et les sous-sections de ce chapitre
アーカイブ
もっと
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

コードワールド

© 2018 codetd.com