モジュール性の原則: ソースマップ

1. Webpackパッケージングの基本構成

1. webpack と webpack-cli をインストールします。npm i webpack webpack-cli
2. 設定"build":"webpack"
3. 新規作成します。webpack.config.js

const path = require('path');
module.exports = {
    
    
	// mode: "development",//  默认production（什么都不设置的情况下）；他会把代码丑化 也可以设置'development'
	mode:"production",
	entry: './src/main.js',
	output: {
    
    
		filename: 'main.js',
		path: path.resolve(__dirname, './build'),
	}
}

• モード構成
• Mode 設定オプションは、対応するモードの組み込み最適化を使用するように webpack に指示できます。
  • デフォルト値はproductionです(何も設定されていない場合)。
  • オプションの値は次のとおりです: 'none' | 'development' | 'production';
  • 具体的な設定手順は公式Webサイト参照
    

• モード構成の開発および実稼働環境のパッケージ化
• main.js

const a = '11111'
console.log(a);
console.log(fooc);
function foo() {
    
    
	console.log(a);
}
foo()

• モードをproductionまたはデフォルト値に設定すると、パッケージ化されたコードが次のコードであることがわかります。

• なぜなら、以下のコードは醜いからです。同時に、そのようなコードは出版時やオンラインで使用されます。

• 上线追求的是体积小，而不是打包速度

注意他のモジュールコードを参照している場合、または参照していない場合、特定のエラーメッセージが見つかりません。

• ただし、モードを に設定するとdevelopment、パッケージ化されたコードが次のコードであることがわかります。
  

• 上記のコードは次のとおりですeval执行的代码中，添加 //# sourceURL=；

• eval: 開発モードのデフォルト値は生成されませんがsource-map、特定のエラー位置情報は非常に明確です。
  

モジュラー言語を導入する場合、モードは開発環境と運用環境のパッケージ化を構成します。
main.js

• モードはに設定されていますdevelopment

• 上記のコードがパッケージ化された後のエラー メッセージはあまり正確ではないことがわかります。
• ビルド環境にモードを設定するときはもちろん、エラー メッセージも不正確です。
• source-mapしたがって、パッケージ化されたコードの特定のエラー情報を表示するには、ファイルを生成する必要があります。

2. ソースマップの基本的な説明

• 開発中、コードは通常、ブラウザ上で実行するときにパッケージ化によって圧縮されます。
  • つまり、ブラウザ上で実際に実行されるコードは、私たちが作成するコードとは実際には異なります。
  • たとえば、ES6 コードは ES5 に変換される場合があります。
  • たとえば、対応するコードの行番号と列番号は、コンパイル後は確実に不一致になります。
  • たとえば、コードが醜くて圧縮されている場合、エンコーディング名が変更されます。
  • たとえば、TypeScript やその他のメソッドで記述されたコードを使用し、最終的にそれを JavaScript に変換します。
• でもいつ代码报错需要调试时（debug），调试转换后的代码是很困难的
• デバッグコードの一貫性を確保するには、以下を導入する必要があります。source-map
  • Source-map は、変換されたコードを元のソース ファイルにマップします。
  • ブラウザが元のソースを再構築し、再構築された元のソースをデバッガーに表示できるようにします。

2.1 ソースマップの使用法

webpack.config.jsで設定するdevtool:'source-map',

• 次に、モードを生产环境デフォルトに設定するか、デフォルトで設定しないように設定します。パッケージ化すると、次のコードが表示されます。

• モードを次のように設定してもmode: "development"同じことができます。
• 特定のエラー情報は、明確に指定された場所に表示されます。
  
• ソースマップの使用
  • ソース ファイルに従って、ソース マップ ファイルが生成されます。Webpack がパッケージ化されると、設定を通じてソース マップを生成できます。
  • 変換されたコードの最後に、ソースマップを指すコメントを追加します。

# sourceMappingURL=common.bundle.js.map

• 注意点ソースマップ ファイルを有効にするには、ブラウザがソースマップ ファイルをサポートしていることを確認する必要があります。
  

2.2 ソースマップファイルの分析

• 開発バージョンには 3 つの変更が加えられ、パッケージ サイズが小さくなりました ( 原来的10倍-> 50% ->50%)

• version: 現在使用されているバージョン、つまり最新の第 3 版です。
• sources: どのファイル (初期ファイル) から変換されたソースマップとパッケージ化されたコード。
• names: 変換前の変数名と属性名 (現在開発モードを使用しているため、変換前に名前を保持する必要はありません)。
• mappings: Source-map は、情報 (位置情報など)、base64 VLQ (可変長数量可変長値) エンコードの文字列をソース ファイルにマップするために使用されます。
• file: パッケージ化されたファイル (ブラウザによってロードされたファイル)。
• sourceContent：変換前の特定のコード情報（ソースに対応）。
• sourceRoot: すべてのソースに対する相対的なルート ディレクトリ。

3. devtool がソースマップ解析を設定する

1. devtool:'source-map' を設定します。
2. 異なる値を選択すると、生成されるソースマップが若干異なり、パッケージ化プロセスのパフォーマンスにも違いが生じるため、状況に応じて選択できます。

• 具体的な 26 の値設定のリファレンス

• 重要なのは、次の値ではソースマップが生成されないことです。

• false:source-map を使用しません。つまり、source-map に関連するものは何もありません。

• none: production模式下的默认值（什么值都不写）、ソースマップは生成されません。

• eval: development模式下的默认值、ソースマップは生成されません

  • ただし、これは eval によって実行されるコードに追加されます//# sourceURL=。
  • これは実行中にブラウザによって解析され、コードのデバッグを容易にするために、対応するファイル ディレクトリがデバッグ パネルにいくつか生成されます。

• eval は実際にはソース ファイル コードを復元するために使用される関数と同等ですが、復元されたコードはあまり正確ではありません。

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   foo: () => (/* binding */ foo),\n/* harmony export */   message: () => (/* binding */ message)\n/* harmony export */ });\nconst foo = 'Mssage 消息中心'\r\n\r\nfunction message() {\r\n\treturn '调用了消息中心'\r\n}\r\n\r\n\r\nmessage()\r\n\r\nconsole.log(notive);\r\n\n\n//# sourceURL=webpack://02_source_map/./src/untils/index.js?");

• eval-source-map 値
  • ソースマップは生成されますが、source-map は以DataUrl添加到eval函数的后面
• インラインソースマップの値
  • ソースマップが生成されますが、ソースマップは以下に基づいていますDataUrl添加到bundle文件的后面
• 安価なソースマップの値
  • ソースマップが生成されますが、そのため没有生成列映射(列マッピング)より効率的 (安価でオーバーヘッドが低い) になります。
  • エラーメッセージを特定できる