1. ホーム
  2. webpack

[解決済み] bazel と webpack の統合

2022-02-18 21:43:25

質問

bazelでビルドしているmonorepoにwebpackを持っていこうとしています。

のようなものがあります。

source/
-moduleA/
-moduleB/
--package.json
--static/
---image.png
--source/
---foo.ts
---bar.js
---baz.jsx

を設定しました。 webpack.config.js を実行すると webpack のようなものが出てきます。

dist/
-generated.html
-bundled.js
-copied/
--css/
--img/

私の知る限り、これはWebアプリを構築するものです。もし私が /dist ブラウザが読み込むのは generated.html それが他のファイルを読み込むことになる。

Bazel は私の /dist しかし、私は遭遇したすべてのエラーの意味を理解することはできません。私は次のようなものを実行しようとしています。

genrule(
  name = "webpack_stuff",
  srcs = [
    ":deps"
  ],
  cmd = " && ".join([
    "cd source/core/viewer",
    "node node_modules/webpack/bin/webpack.js --config webpack.prod.js --output-path $@",
  ]),
  outs = ["dist"],
  visibility = [
    "//visibility:public",
  ],
)

しかし、あるときは "dist" がディレクトリであることを指摘され、あるときは読み取り専用のファイルシステムで作業していることを指摘されます。

私が期待したのは、もし私が npm run build または webpack bazelなしで、bazelで実行できるようになること。これは、素人考えですが、webpack の結果でデプロイに似たことをするはずなので、bazel の中間的なステップになるような気がします。すべての結果を zip で /dist が、bazelにどう受け取らせるかはまだわからない。

どうにかして、bazel に "ファイルを作成するように伝えることはできませんか? webpacked.zip そして、次のステップでそれを使用します"?

私のこれまでの調査では、この方法は非常に複雑か不可能であり、これらのツールの本来の使い方ではない可能性が高いという結果がほとんど得られました。どんな助けでも大歓迎です。

どのように解決するのですか?

genrule は、ディレクトリの扱い方を知らないので outs . いくつかのアプローチがあります。

  1. の最後のステップとして、出力ディレクトリのすべてをZipアップします。 genrule で、そのzipファイルを宣言します。 outs . 不利な点は、これらのファイルを扱うすべてのステップで zip と unzip をしなければならないことです (圧縮をスキップすれば、少しは速くなるかもしれません)。

  2. ディレクトリ出力を操作するためのAPIがあるStarlarkルールを書く。この方法についての詳細は、この質問で説明しています。 Bazel: ディレクトリを出力する属人的なルール

  3. nodejsのバゼルルール が webpack をサポートしているように見える。 https://github.com/bazelbuild/rules_nodejs/tree/c5d09095ba4653b4cd5837360e13ff2b105ba3be/examples/react_webpack そこで、nodejsのルールを使って調査してみてはいかがでしょうか。