我应该如何调用webpack来绑定bazel的ts_library输出
我试图建立一个反应JS应用程序的类型记录来源，建立与巴泽尔，并使用Webpack作为捆绑。rules_nodejs包括webpack，它展示了如何使用ts_project来实现它，但是我需要使用ts_library构建它，因为ts_project似乎不能很好地处理生成的TS文件(在我的例子中是protobuf文件)。
我如何让ts_library和Webpack打得好(反之亦然)？
这里是我尝试用示例/react_webpack来使用ts_library而不是ts_project的尝试。它使用Webpack 4，因为这就是这个例子所用的，我想尽量减少变化。为了完整起见，我还使用了此承诺，它可以复制Webpack 5的更改，虽然这是我第一次使用Webpack 5，所以我可能在迁移中引入了额外的问题。
当我使用Webpack 4提交运行bazel run server时，然后在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:1Webpack 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在这两种情况下，我都按了webpack对./bazel-out/k8-fastbuild/bin/index.js的要求，这就是我指定的入口点(不确定这是否是指定为入口点的正确路径)。这使我进入了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 ts_project编写的index.tsx示例/react_webpack示例如下所示：
"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我觉得那是剧本？
ts_library像这样编译它，我认为它是一个模块？
(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=这是问题的根源吗？我应该试着弄清楚为什么/如何ts_project使用更简单的形式，然后说服ts_library做同样的事情吗？还是让Webpack将ts_library输出打包为- is更好？如果是后者，怎么做？
编辑： ts_library规则似乎使用了自己设计的tsconfig，将compilerOptions.module设置为umd。在ts_project版本中设置相同的选项将导致index.js增长上面显示的所有工厂goo。
回答 1
Stack Overflow用户
发布于 2021-01-06 11:14:13
看起来问题在于ts_library将其devmode_module参数默认为umd。Webpack，至少像在rules_nodejs示例中配置的那样(即没有特定于UMD的插件)似乎无法处理ts_library生成的UMD模块。将devmode_module改为es2015解决了这个问题。我不知道这是否是最好的解决方案，但它导致Webpack创建一个功能捆绑的JS文件。
https://stackoverflow.com/questions/65598485
复制相似问题
腾讯云开发者
