Как мне вызвать webpack для объединения вывода ts_library bazel

Question

Я пытаюсь создать приложение React JS из исходников Typescript, созданное с помощью Bazel и использующее Webpack в качестве сборщика. rules_nodejs включает в себя examples/react_webpack , который показывает, как это сделать с помощью , но мне нужно собрать его с помощью, потому что, похоже, он плохо справляется с сгенерированными файлами TS (в моем случае файлы protobuf TS).

Как мне научиться хорошо играть с Webpack (или наоборот)?

Вот моя попытка адаптировать examples/react_webpack для использования вместо . Он использует Webpack 4, потому что именно его использует пример, и я хотел свести к минимуму изменения. Для полноты картины у меня также есть эта фиксация , которая воспроизводит изменение с Webpack 5, хотя я впервые использую Webpack 5, поэтому, возможно, я создал дополнительные проблемы с миграцией.

Когда я бегу bazel run serverс фиксацией Webpack 4, затем загружаю полученную страницу в Chrome, я получаю эту ошибку на консоли:

      app.bundle.js:6 Uncaught Error: Cannot find module 'react'
    at n (app.bundle.js:6)
    at app.bundle.js:6
    at app.bundle.js:6
    at Object.<anonymous> (app.bundle.js:6)
    at n (app.bundle.js:1)
    at app.bundle.js:1
    at app.bundle.js:1

Webpack 5 выдает аналогичную ошибку, но немного более информативную(?):

      _sync:2 Uncaught Error: Cannot find module 'react'
    at webpackEmptyContext (_sync:2)
    at eval (index.tsx:7)
    at eval (index.js:3)
    at eval (index.js:12)
    at Object../bazel-out/k8-fastbuild/bin/index.js (main.js:18)
    at __webpack_require__ (main.js:172)
    at main.js:188
    at main.js:189

В обоих случаях я нажимаю веб-пакет для ./bazel-out/k8-fastbuild/bin/index.js, который я обозначил как свою точку входа (не уверен, что это правильный путь, указанный в качестве точки входа). Это приводит меня к модулю AMD(?), который затем требует ./bazel-out/k8-fastbuild/bin sync recursive. Это требование, похоже, приводит непосредственно к ошибке:

      /***/ "./bazel-out/k8-fastbuild/bin sync recursive":
/*!******************************************!*\
  !*** ./bazel-out/k8-fastbuild/bin/ sync ***!
  \******************************************/
/***/ ((module) => {

eval("function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = () => [];\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = \"./bazel-out/k8-fastbuild/bin sync recursive\";\nmodule.exports = webpackEmptyContext;\n\n//# sourceURL=webpack:///./bazel-out/k8-fastbuild/bin/_sync?");

Еще одну вещь я заметил:

Пример rules_nodejs examples/react_webpack с использованием , компилируется index.tsxкак это:

      "use strict";
exports.__esModule = true;
var React = require("react");
var ReactDOM = require("react-dom");
var styles = require("./styles.css");
ReactDOM.render(React.createElement("h1", { className: styles.h1 }, "Hello, world!"), document.getElementById("root"));
s

Я думаю, это сценарий?

компилирует это так, что я думаю, это модуль?

      (function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define("react_webpack/index", ["require", "exports", "react", "react-dom"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const React = require("react");
    const ReactDOM = require("react-dom");
    ReactDOM.render(React.createElement("h1", null, "Hello, world!"), document.getElementById("root"));
});
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7SUFBQSwrQkFBK0I7SUFDL0Isc0NBQXNDO0lBRXRDLFFBQVEsQ0FBQyxNQUFNLENBQ2IsZ0RBQXNCLEVBQ3RCLFFBQVEsQ0FBQyxjQUFjLENBQUMsTUFBTSxDQUFDLENBQ2hDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCAqIGFzIFJlYWN0RE9NIGZyb20gXCJyZWFjdC1kb21cIjtcblxuUmVhY3RET00ucmVuZGVyKFxuICA8aDE+SGVsbG8sIHdvcmxkITwvaDE+LFxuICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChcInJvb3RcIilcbik7XG4iXX0=

Является ли эта разница корнем проблемы? Должен ли я пытаться выяснить, почему и как используется более простая форма, а затем убедить сделать то же самое? Или лучше сказать Webpack, чтобы он упаковывал выходные данные как есть? Если второе, то как?

РЕДАКТИРОВАТЬ : ts_libraryправило, похоже, использует собственный tsconfig, который устанавливает compilerOptions.moduleк umd. Установка той же опции в ts_projectверсия вызывает index.jsчтобы вырастить всю фабричную слизь, показанную выше.

Answer 1

Похоже, проблема в том, что по умолчанию его параметр равен umd. Webpack, по крайней мере, настроенный в примере rules_nodejs (т. е. без подключаемых модулей, специфичных для UMD), похоже, не может обрабатывать модули UMD, сгенерированные ts_library. Изменение devmode_moduleк es2015решает проблему. Я не знаю, лучшее ли это решение, но в результате Webpack создает функциональный JS-файл в комплекте.