パッケージ化プロセスと webpack の原則の詳細な分析

Webpack はどのようにパッケージ化を実装しますか?次の記事では、Webpack のパッケージ化原則について詳しく説明します。お役に立てば幸いです。

フロントエンドの「包囲ライオン」として、Webpack は非常によく知られています。Webpack は非常に多くのことができます。すべてのリソース (JS、TS、JSX を含む) を組み合わせることができます。 、画像、フォント、CSS など）がパッケージ化されて依存関係に配置されるため、必要に応じて依存関係を参照してリソースを使用できます。 Webpack は、フロント エンドで複数のファイル リソースを変換し、複雑なモジュールの依存関係を分析するという優れた仕事を行っています。また、ローダーをカスタマイズして、独自のリソースを自由にロードすることもできます。では、Webpack はどのようにパッケージ化を実装するのでしょうか? 今日来て見てみましょう。

Webpack パッケージ化の原則を知りたい場合は、事前に 2 つの知識ポイントを知っておく必要があります。

1. require とは何ですか?

require というと、最初に思い浮かぶのは import かもしれません。import は es6 の標準構文です。

– require はランタイム呼び出しなので、require は実行できます。 Place;

– import はコンパイル中に呼び出されるため、ファイルの先頭に配置する必要があります;

Webpack を使用してコンパイルする場合、 babel を使用して import を require に変換します。CommonJS には、モジュールをロードするために使用されるグローバル メソッド require() があります。AMD と CMD も参照に require メソッドを使用します。

例:

var add = require('./a.js');
add(1,2)

簡単に言えば、require は実際には関数であり、参照される ./a.js は関数の単なるパラメーターです。

2. 輸出とは何ですか?

ここでは、エクスポートをオブジェクトとして考えることができます。MDN エクスポート 具体的な使用方法を確認できます。

require とexports を理解したら、パッケージ化を開始できます

まず、パッケージ化後のコード構造を見てみましょう。パッケージ化後に require とexports が表示されることがわかります。

すべてのブラウザが require エクスポートを実行できるわけではありません。コードが正常に動作するようにするには、require とエクスポートを自分で実装する必要があります。パッケージ化されたコードは自己実行関数であり、パラメータには依存関係情報とファイルのコードが含まれており、実行される関数本体は eval を通じてコードを実行します。

全体的な設計図は次のとおりです。

ステップ 1: 構成を記述するファイル

構成ファイルは、後続に生成されるファイルを準備するために、パッケージ化されたエントリ エントリとパッケージ化された終了出力を構成します。

const path = require("path");
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),//打包后输出的文件地址，需要绝对路径因此需要path
    filename:"main.js"
  },
  mode:"development"

第 2 ステップ: モジュール分析

全体的なアイデア : fs ファイルの読み取りを使用すると要約できます。 file は、AST を通じてインポート依存ファイルのパスを取得します。依存ファイルにまだ依存関係がある場合は、依存関係の分析が明確になり、マップに保持されるまで再帰されます。

詳細な解体: AST はこの関数で生まれているため、なぜ AST が使用されるのか疑問に思う人もいるかもしれません。その ImportDeclaration は、インポート構文をすばやくフィルタリングするのに役立ちます。もちろん、通常のマッチングも可能です。結局のところ、ファイルは読み取られた後は単なる文字列であり、ファイルの依存関係パスは素晴らしい正規表現を記述することで取得できますが、十分エレガントではありません。

step1: 次のように新しいindex.js、a.js、b.jsの依存関係を作成します。

index.jsファイル

import { str } from "./a.js";
console.log(`${str} Webpack`)

a.jsファイル

import { b} from "./b.js"
export const str = "hello"

b.js ファイル

export const b="bbb"

step2: Webpack を作成します

モジュール分析: AST の @babel/parser を使用しますファイルから読み取った文字列を AST ツリーに変換し、@babel/traverse を使用して構文分析を実行し、ImportDeclaration を使用してインポートをフィルター処理してファイルの依存関係を見つけます。

    const content = fs.readFileSync(entryFile, "utf-8");
    const ast = parser.parse(content, { sourceType: "module" });
  
    const dirname = path.dirname(entryFile);
    const dependents = {};
    traverse(ast, {
      ImportDeclaration({ node }) {
        // 过滤出import
        const newPathName = "./" + path.join(dirname, node.source.value);
        dependents[node.source.value] = newPathName;
      }
    })
    const { code } = transformFromAst(ast, null, {
      presets: ["@babel/preset-env"]
    })
    return {
      entryFile,
      dependents,
      code
    }

結果は次のとおりです:

再帰またはループを使用して、依存関係分析のためにファイルを 1 つずつインポートします。ここでは for ループを使用していることに注意してください。すべての依存関係を分析する、ループがすべての依存関係を分析できる理由は、モジュールの長さが変化することに注意してください。

 for (let i = 0; i <p><strong><span style="font-size: 18px;">ステップ 3: WebpackBootstrap 関数を記述して出力ファイルを生成する</span></strong></p><p><strong>编写</strong> <strong>WebpackBootstrap</strong> <strong>函数</strong>：这里我们需要做的首先是 WebpackBootstrap 函数，编译后我们源代码的 import 会被解析成 require 浏览器既然不认识 require ，那我们就先声明它，毕竟 require 就是一个方法，在编写函数的时候还需要注意的是作用域隔离，防止变量污染。我们代码中 exports 也需要我们声明一下，保证代码在执行的时候 exports 已经存在。</p><p><strong>生成输出文件</strong>：生成文件的地址我们在配置文件已经写好了，再用 fs.writeFileSync 写入到输出文件夹即可。</p><pre class="brush:php;toolbar:false">  file(code) {
    const filePath = path.join(this.output.path, this.output.filename)
    const newCode = JSON.stringify(code);
    // 生成bundle文件内容
    const bundle = `(function(modules){
      function require(module){
        function pathRequire(relativePath){
          return require(modules[module].dependents[relativePath])
        }
        const exports={};
        (function(require,exports,code){
          eval(code)
        })(pathRequire,exports,modules[module].code);
        return exports
      }
      require('${this.entry}')
    })(${newCode})`;
      //  WebpackBoostrap
    // 生成文件。放入dist 目录
    fs.writeFileSync(filePath,bundle,'utf-8')
  }

第四步：分析执行顺序

我们可以在浏览器的控制台运行一下打包后的结果，如果能正常应该会打印出 hello Webpack。

总结

通过以上的分析，我们应该对 Webpack 的大概流程有基本的了解，利用 AST 去解析代码只是本次演示的一种方式，不是 Webpack 的真实实现，Webpack 他自己有自己的 AST 解析方式，万变不离其宗都是拿到模块依赖，Webpack 生态是很完整，有兴趣的童鞋可以考虑以下三个问题：

• 如果出现组件循环引用那又应该如何处理？
• Webpack 是如何加载 loader 的？
• 犹大大极力推荐的 vite 可以实现按需打包，大大提升开发时候打包速度，如果是 webapck 又是应该如何实现？

更多编程相关知识，请访问：编程视频！！

以上がパッケージ化プロセスと webpack の原則の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。