react-native - 如何使用buck构建适用于iOS和Android的React-native应用程序

Question

Buck听起来对iOS和Android项目来说都是不错的工具，但是我还没有找到有关如何将其用于本地化项目的信息。

更新

似乎已经对此进行了一些工作，但是可能不建议这样做。

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

更新2

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

Answer 1

2017年8月6日更新:

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

请注意，自述文件中记录了此方法的一些问题，在生产应用程序中使用此方法可能会或可能不会造成问题。

该仓库还没有 bundle JS进行生产。

较旧的答案:

我让Buck负责一个iOS项目。这是一项很大的工作，但是可行。一些注意事项:

我手动从node_modules/react-native/React复制文件，然后node_modules/react-native/Libraries(请参见下面的文件夹结构)。

我必须在每个库中添加-w和Wno-error标志，因为主项目将警告视为错误，并且我不想在Xcode中看到所有这些React Native警告。

您可能必须按照该模式添加更多库。它还有助于查看React Native podspec。

可能有机会进行清理，例如reactnative.xcodeproj文件夹中不需要vendor/reactnative(请参见下文)。

可能需要一些工作才能正确 bundle JS进行生产。目前，仅当从服务器(例如Node.js)中获取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'
  ]
)

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

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中添加:

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