我如何使用 buck 为 iOS 和 Android 构建 react-native 应用程序 [英] How can I use buck to build react-native apps for both iOS and Android

问题描述

Buck 听起来像是 iOS 和 Android 项目的绝佳工具，但我一直没有找到有关如何将它用于 react-native 项目的任何信息.

Buck sounds like a great tool for both iOS and Android projects but I have not been abel to find any information on how to use it for react-native projects.

更新

似乎正在为此做一些工作，但可能尚不推荐.

Looks like there is some work being done on this but it may not be recommended yet.

https://github.com/facebook/nuclide/issues/31#issuecomment-164897170https://github.com/facebook/buck/tree/master/test/com/facebook/buck/js

更新 2

产品痛点链接 https://productpains.com/post/react-本机/add-buck-as-a-build-option

推荐答案

2017 年 8 月 6 日更新:

我尝试按照以下步骤将 React Native 集成到带有 Buck 的 iOS 应用程序中，但在使用 React Native 0.47 时遇到了问题.相反，我有一个新的更简单的方法，通过链接到预构建的库，让 React Native 在 iOS 上与 Buck 一起工作.我分叉了 Buck 示例项目存储库，并将其与 此存储库 中的 React Native 一起使用.我还更新了 README 在该 repo 中，包含运行演示 Buck React Native iOS 应用程序以及如何集成自己的说明.

I tried following my steps below for integrating React Native into an iOS app with Buck but I ran into issues when using React Native 0.47. Instead I have a new simpler approach for getting React Native working with Buck on iOS by linking to prebuilt libraries. I forked the Buck sample project repo and have it working with React Native in this repo. I also updated the README in that repo with instructions for running the demo Buck React Native iOS app and how to integrate yourself.

请注意，自述文件中记录的这种方法存在一些问题，在生产应用中使用它可能会也可能不会出现问题.

Note there are a couple issues with this approach documented in the README that may or may not be a problem for using this in a production app.

那个 repo 也没有捆绑用于生产的 JS.

That repo also doesn't bundle the JS for production yet.

旧答案:

我让巴克处理一个 iOS 项目.这是一项正在进行的工作，但有效.一些注意事项:

I got Buck working with an iOS project. It is very much a work in progress, but works. A few notes:

• 我从 node_modules/react-native/React 手动复制文件，然后node_modules/react-native/Libraries(参见下面的文件夹结构).
• 我不得不为每个库添加 -w 和 Wno-error 标志，因为主项目将警告视为错误，我不想看到所有Xcode 中的这些 React Native 警告.
• 您可能需要按照该模式添加更多库.查看 React Native podspec 也有帮助.
• 可能有机会清理一些东西，比如 vendor/reactnative 文件夹中不需要 reactnative.xcodeproj(见下文).
• 可能需要做一些工作才能正确捆绑 JS 以进行生产.目前，它仅在从服务器(例如 Node.js)获取 JS 时才有效.

• I manually copied files from node_modules/react-native/React and node_modules/react-native/Libraries (see folder structure below).
• I had to add the -w and Wno-error flags to each library because the main project had treat warnings as errors and I didn't want to see all of these React Native warnings in Xcode.
• You may have to add more libraries following the pattern. It also helps to look at the React Native podspec.
• There is probably opportunity to clean things up like there is no need for reactnative.xcodeproj in the vendor/reactnative folder (see below).
• There is probably some work needed to correctly bundle the JS for production. Currently it will only work if the JS is fetched from a server (e.g. Node.js).

这是我的 vendor/reactnative/BUCK 文件:

apple_library(
  name = 'ReactNative',
  srcs = glob([
    'React/**/*.m',
    'React/**/*.mm',
    'React/**/*.c',
    'React/**/*.S',
  ]),
  exported_headers = glob([
    'React/**/*.h',
  ]),
  system_frameworks = [
    'JavaScriptCore'
  ],
  exported_linker_flags = [
    '-lc++',
  ],
  compiler_flags = [
    '-Wno-error',
    '-w'
  ],
  visibility = ['PUBLIC'],
)

apple_library(
  name = 'RCTWebSocket',
  srcs = glob([
    'Libraries/WebSocket/*.m',
  ]),
  headers = glob([
    'React/**/*.h',
  ]),
  exported_headers = glob([
    'Libraries/WebSocket/*.h',
  ]),
  compiler_flags = [
    '-Wno-error',
    '-w'
  ],
  visibility = ['PUBLIC'],
  deps = [
    ':ReactNative',
  ]
)

apple_library(
  name = 'RCTNetwork',
  srcs = glob([
    'Libraries/Network/*.m',
  ]),
  headers = glob([
    'React/**/*.h',
  ]),
  exported_headers = glob([
    'Libraries/Network/*.h',
  ]),
  compiler_flags = [
    '-Wno-error',
    '-w'
  ],
  visibility = ['PUBLIC'],
  deps = [
    ':ReactNative',
  ]
)

apple_library(
  name = 'RCTText',
  srcs = glob([
    'Libraries/Text/*.m',
  ]),
  headers = glob([
    'React/**/*.h',
  ]),
  exported_headers = glob([
    'Libraries/Text/*.h',
  ]),
  compiler_flags = [
    '-Wno-error',
    '-w'
  ],
  visibility = ['PUBLIC'],
  deps = [
    ':ReactNative',
  ]
)

apple_library(
  name = 'RCTImage',
  srcs = glob([
    'Libraries/Image/*.m',
  ]),
  headers = glob([
    'React/**/*.h',
    'Libraries/Network/*.h'
  ]),
  exported_headers = glob([
    'Libraries/Image/*.h',
  ]),
  compiler_flags = [
    '-Wno-error',
    '-w'
  ],
  visibility = ['PUBLIC'],
  deps = [
    ':ReactNative',
    ':RCTNetwork'
  ]
)

这是我项目中供应商文件夹内的文件夹结构:

Here is the folder structure inside a vendor folder in my project:

vendor/reactnative
├── BUCK
├── Libraries
│   ├── ART
│   ├── ActionSheetIOS
│   ├── AdSupport
│   ├── Animated
│   ├── AppRegistry
│   ├── AppState
│   ├── BatchedBridge
│   ├── BugReporting
│   ├── CameraRoll
│   ├── Components
│   ├── CustomComponents
│   ├── DebugComponentHierarchy
│   ├── Devtools
│   ├── EventEmitter
│   ├── Experimental
│   ├── Fetch
│   ├── Geolocation
│   ├── Image
│   ├── Inspector
│   ├── Interaction
│   ├── JavaScriptAppEngine
│   ├── LayoutAnimation
│   ├── Linking
│   ├── LinkingIOS
│   ├── Modal
│   ├── NativeAnimation
│   ├── NavigationExperimental
│   ├── Network
│   ├── Promise.js
│   ├── PushNotificationIOS
│   ├── QuickPerformanceLogger
│   ├── RCTTest
│   ├── RKBackendNode
│   ├── ReactIOS
│   ├── ReactNative
│   ├── Sample
│   ├── Settings
│   ├── Storage
│   ├── StyleSheet
│   ├── Text
│   ├── Utilities
│   ├── Vibration
│   ├── WebSocket
│   ├── promiseRejectionIsError.js
│   ├── react-native
│   └── vendor
├── React
│   ├── Base
│   ├── Executors
│   ├── Layout
│   ├── Modules
│   ├── Profiler
│   └── Views
└── reactnative.xcodeproj
    ├── project.pbxproj
    └── xcuserdata

然后在我的主 BUCK 文件的 deps 中添加:

Then in the deps of my main BUCK file I add:

'//vendor/reactnative:ReactNative',
'//vendor/reactnative:RCTWebSocket',
'//vendor/reactnative:RCTText',
'//vendor/reactnative:RCTNetwork',
'//vendor/reactnative:RCTImage'

这篇关于我如何使用 buck 为 iOS 和 Android 构建 react-native 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！