如何解决具有打字稿和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 举报,一经查实,本站将立刻删除。