具有打字稿和ibazel的reactjs无法正常工作

问题描述

我看过this示例，该示例如何使用bazel运行/构建React应用。与我的项目唯一的区别是，react项目位于名为“ ui”的子目录中。因此，WORSPACE文件不在react目录中，而在父目录中。我的WORSPACE文件：

workspace(
    name = "tool",managed_directories = {"@npm": ["ui:node_modules"]},)

load("@bazel_tools//tools/build_defs/repo:http.bzl","http_archive")

http_archive(
    name = "build_bazel_rules_nodejs",sha256 = "10fffa29f687aa4d8eb6dfe8731ab5beb63811ab00981fc84a93899641fd4af1",urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/2.0.3/rules_nodejs-2.0.3.tar.gz"],)

http_archive(
    name = "bazel_skylib",sha256 = "97e70364e9249702246c0e9444bccdc4b847bed1eb03c5a3ece4f83dfe6abc44",urls = [
        "https://mirror.bazel.build/github.com/bazelbuild/bazel-skylib/releases/download/1.0.2/bazel-skylib-1.0.2.tar.gz","https://github.com/bazelbuild/bazel-skylib/releases/download/1.0.2/bazel-skylib-1.0.2.tar.gz",],)

load("@build_bazel_rules_nodejs//:index.bzl","npm_install")

npm_install(
    # Name this npm so that Bazel Label references look like @npm//package
    name = "npm",package_json = "//ui:package.json",package_lock_json = "//ui:package-lock.json",)

我的package.json文件：

{
  "name": "ui","version": "0.1.0","private": true,"dependencies": {
    "@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.3.2","@testing-library/user-event": "^7.1.2","@types/jest": "^24.0.0","@types/node": "^12.0.0","@types/react": "^16.9.0","@types/react-dom": "^16.9.0","react": "^16.13.1","react-dom": "^16.13.1","react-scripts": "3.4.1","typescript": "~3.7.2"
  },"devDependencies": {
    "@bazel/bazelisk": "^1.6.1","@bazel/ibazel": "^0.13.1"
  },"scripts": {
    "start": "ibazel run //ui:start","build": "bazel build //ui:build","test": "ibazel test //ui:test"
  },"eslintConfig": {
    "extends": "react-app"
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  }
}

最后但并非最不重要的是ui文件夹中的BUILD.bazel文件。我将开始作业中的行"--node_options=--require=$(rootpath chdir.js)",更改为"--node_options=--require=./$(rootpath chdir.js)",

load("@bazel_skylib//rules:write_file.bzl","write_file")
load("@build_bazel_rules_nodejs//:index.bzl","copy_to_bin","nodejs_test")
load("@npm//react-scripts:index.bzl","react_scripts","react_scripts_test")
load("@io_bazel_rules_docker//container:container.bzl","container_image")
load("@bazel_tools//tools/build_defs/pkg:pkg.bzl","pkg_tar")
load("@build_bazel_rules_nodejs//:index.bzl","npm_package_bin")

# Filename conventions described at
# https://create-react-app.dev/docs/running-tests#filename-conventions
_TESTS = [
    "src/**/*.test.js*","src/**/*.test.ts*","src/**/*.spec.js*","src/**/*.spec.ts*","src/**/__tests__/**/*.js*","src/**/__tests__/**/*.ts*",]

# We don't want to teach react-scripts to include from multiple directories
# So we copy everything it wants to read to the output "bin" directory
copy_to_bin(
    name = "copy_static_files",srcs = glob(
        [
            "public/*","src/**/*",exclude = _TESTS,) + [
        "package.json","tsconfig.json",)

# react-scripts can only work if the working directory is the root of the application.
# So we'll need to chdir before it runs.
write_file(
    name = "write_chdir_script",out = "chdir.js",content = ["process.chdir(__dirname)"],)

_RUNTIME_DEPS = [
    "chdir.js","copy_static_files","@npm//react","@npm//react-dom",]

react_scripts(
    # Note: this must be named "build" since react-scripts hard-codes that as the output dir
    name = "build",args = [
        "--node_options=--require=./$(execpath chdir.js)","build",data = _RUNTIME_DEPS + [
        "@npm//@types",output_dir = True,)

nodejs_test(
    name = "build_smoke_test",data = ["build"],entry_point = "build_smoke_test.js",)

copy_to_bin(
    name = "copy_test_files",srcs = glob(_TESTS),)

react_scripts_test(
    name = "test",args = [
        "--node_options=--require=$(rootpath chdir.js)","test",# ibazel is the watch mode for Bazel when running tests
        # Because Bazel is really a CI system that runs locally
        "--watchAll=false","--no-cache","--no-watchman","--ci",data = _RUNTIME_DEPS + [
        "copy_test_files","@npm//@testing-library/dom","@npm//@testing-library/jest-dom","@npm//@testing-library/react","@npm//@testing-library/user-event",# Need to set the pwd to avoid jest needing a runfiles helper
    # Windows users with permissions can use --enable_runfiles
    # to make this test work
    tags = ["no-bazelci-windows"],)

react_scripts(
    name = "start",args = [
        "--node_options=--require=./$(rootpath chdir.js)","start",data = _RUNTIME_DEPS,)

执行“ npm start”会给出以下输出：

iBazel [4:20PM]: Querying for files to watch...
Loading: 0 packages loaded
Loading: 0 packages loaded
Loading: 0 packages loaded
Loading: 204 packages loaded

Loading: 204 packages loaded
Loading: 0 packages loaded
Loading: 0 packages loaded
Loading: 0 packages loaded
Loading: 993 packages loaded

Loading: 993 packages loaded
iBazel [4:21PM]: Running //ui:start
INFO: Invocation ID: 5800c1f9-01ac-4381-9819-5bca2d305477
Loading: 
Loading: 0 packages loaded
Loading: 0 packages loaded
Loading: 0 packages loaded
Analyzing: target //ui:start (0 packages loaded,0 targets configured)
INFO: Analyzed target //ui:start (204 packages loaded,36970 targets configured).
INFO: Found 1 target...

INFO: Elapsed time: 17.860s
INFO: 0 processes.
INFO: Build completed successfully,0 total actions
INFO: Build completed successfully,0 total actions
INFO: Invocation ID: 45f00b98-1378-42de-a0f6-b0fdf2dbe33f
Loading: 
Loading: 0 packages loaded
Loading: 0 packages loaded
Loading: 0 packages loaded
Analyzing: target //ui:start (1 packages loaded,0 targets configured)
INFO: Analyzed target //ui:start (993 packages loaded,36792 targets configured).
INFO: Found 1 target...
[0 / 1] [Prepa] BazelWorkspaceStatusAction stable-status.txt
Target //ui:start up-to-date:
  dist/bin/ui/start.sh
  dist/bin/ui/start_loader.js
  dist/bin/ui/start_require_patch.js
INFO: Elapsed time: 20.162s,Critical Path: 0.17s
INFO: 0 processes.
INFO: Build completed successfully,1 total action
INFO: Build completed successfully,1 total action
iBazel [4:22PM]: Starting...

################################################################################
# Did you know iBazel can invoke programs like Gazelle,buildozer,and         #
# other BUILD file generators for you automatically based on bazel output?     #
# Documentation at: https://github.com/bazelbuild/bazel-watcher#output-runner  #
################################################################################
Starting the development server...

什么都没有发生，而且挂起了。

出于测试目的，我将工作空间文件复制到react项目中，并调整了我从示例中更改的位置。然后，“ npm start”工作到Starting the development server...为止，然后挂起，没有任何反应。尝试简单的示例项目将得到相同的结果。它挂在Starting the development server...上。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）