我有一個庫,我想在已被瀏覽的React Native項目中使用。當我需要庫時,所有內部require()調用都會被劫持,而不是解決文件內部的依賴性問題,包括React Native試圖解決它們,從而導致它中斷。我想知道在React Native項目中包含browserified庫的正確方法是什麼。如何在React Native中使用browserified庫
回答
我想出的最佳解決方案是切換到webpack。正如在一個評論中暗示的那樣,圖書館需要通過諸如瀏覽器或網絡包之類的東西進行處理,因爲它具有諸如「域」之類的節點內建命令的優勢。問題在於browserify聲明瞭一個require()方法,該方法在React Native裏面並不好,它也有一個require()方法。切換到webpack解決了這個問題,因爲它們以不同的方式命名它們的require()__webpack_require(),這使得處理後的版本能夠在React Native內正確工作。
恕我直言比browserifying節點庫中的更好的方法是
- 使用節點內置插件一樣
crypto
,stream
,等browserify polyfills, - a small Babel transform到
require()
電話從crypto
重寫crypto-browserify
等, - 和React Native打包程序本身將其打包。
ReactNativify回購示範如何做到這一點。
如果您決定使用由ReactNativify通知的方法,通過Philipp von Weitershausen的建議,那麼你應該知道的一些注意事項和技巧(原貼here):
1)我跟着我的發現建議問題列表和分裂transformer.js
分爲兩個部分:
transformers.js(在/config
和調用從rn-cli.config.js
):
const babelTransformer = require('./babel-transformer');
module.exports.transform = function(src, filename, options) {
const extension = String(filename.slice(filename.lastIndexOf('.')));
let result;
try {
result = babelTransformer(src, filename);
} catch (e) {
throw new Error(e);
return;
}
return {
ast: result.ast,
code: result.code,
map: result.map,
filename
};
};
巴貝爾-transformer.js(也在/config
):
'use strict'
const babel = require('babel-core');
/**
* This is your `.babelrc` equivalent.
*/
const babelRC = {
presets: ['react-native'],
plugins: [
// The following plugin will rewrite imports. Reimplementations of node
// libraries such as `assert`, `buffer`, etc. will be picked up
// automatically by the React Native packager. All other built-in node
// libraries get rewritten to their browserify counterpart.
[require('babel-plugin-rewrite-require'), {
aliases: {
constants: 'constants-browserify',
crypto: 'react-native-crypto',
dns: 'mock/dns',
domain: 'domain-browser',
fs: 'mock/empty',
http: 'stream-http',
https: 'https-browserify',
net: 'mock/net',
os: 'os-browserify/browser',
path: 'path-browserify',
pbkdf2: 'react-native-pbkdf2-shim',
process: 'process/browser',
querystring: 'querystring-es3',
stream: 'stream-browserify',
_stream_duplex: 'readable-stream/duplex',
_stream_passthrough: 'readable-stream/passthrough',
_stream_readable: 'readable-stream/readable',
_stream_transform: 'readable-stream/transform',
_stream_writable: 'readable-stream/writable',
sys: 'util',
timers: 'timers-browserify',
tls: 'mock/tls',
tty: 'tty-browserify',
vm: 'vm-browserify',
zlib: 'browserify-zlib'
},
throwForNonStringLiteral: true
}],
// Instead of the above you could also do the rewriting like this:
["module-resolver", {
"alias": {
"mock": "./config/mock",
"sodium-universal": "libsodium"
}
}]
]
};
module.exports = (src, filename) => {
const babelConfig = Object.assign({}, babelRC, {
filename,
sourceFileName: filename
});
const result = babel.transform(src, babelConfig);
return {
ast: result.ast,
code: result.code,
map: result.map,
filename
};
}
2)由於可以在上面的代碼中看到的,我也使用babel-plugin-module-resolver
證實。
注意,我將使用此插件而不是一個ReactNative使用。它可以讓你引用本地文件,並用適當的引號書面允許像非JS兼容的名字「鈉鹽萬能」
注2或去.babelrc
解決方案(也許乾淨)如本意見所列:https://github.com/philikon/ReactNativify/issues/4#issuecomment-312136794
3)我發現我仍然需要在我的項目的根目錄中使用.babelrc
以使我的Jest測試正常工作。有關詳細信息,請參閱此問題:https://github.com/philikon/ReactNativify/issues/8
謝謝,我按你的要求做了。如果您批准,您可以刪除遞減投票。 –
建議改善,然後向下投票和離開是有點粗魯@loki .. –
- 1. 如何使用redux在react-native-router-flux中實現react-native-drawer?
- 2. 如何在React native android中使用TouchableNativeFeedback?
- 3. 如何在React Native ART中使用LinearGradient?
- 4. 如何在MobX中使用React Native ListView?
- 5. react-native:如何在rocksdb中使用asyncstorage?
- 6. 如何在React-native中使用回調?
- 7. 如何在使用Podfiles集成react-native時集成react-native-video?
- 8. 如何使用React Native DatePickerAndroid
- 9. React Native:如何使用Webview?
- 10. 如何使用RCT_EXPORT_MODULE React Native
- 11. 如何在我的react-native庫項目中使用.arr sdk
- 12. 我可以使用react-native-i18n庫和react-native-web-boilerplate
- 13. 如何在react-native-navigation中使用native-base圖標
- 14. react-native react-native-vector-icons:如何使用字體真棒圖標
- 15. react-native - 如何使用react-native-maps顯示地圖
- 16. 如何使用react-native-router-flux在react-native-drawer中進行導航
- 17. React-Native + crypto:如何在React-Native中生成HMAC?
- 18. 如何使用REACT-NATIVE-IMAGE-PICKER從庫中選擇視頻?
- 19. 庫中的更改(React-Native)
- 20. 圖形庫 - React Native
- 21. React Native使用Cocoapods
- 22. 在React-Native中使用鍵或引用
- 23. 如何創建React Native組件庫?
- 24. 如何啓動React Native npm庫?
- 25. 如何將Javascript庫移植到React Native?
- 26. React-Native如何使用布爾值
- 27. 如何使用React Native導航頁面
- 28. 如何使用react-native的PushNotificationIOS.getInitialNotification
- 29. 如何使用React Native下載文件?
- 30. 如何使用React Native的WebSocket和Cookie
爲什麼不使用npm版本? –
有問題的庫取決於像「事件」或「域」這樣的內置節點庫,雖然像「事件」這樣的東西可以作爲依賴添加並且正常工作,但「域」實際上是「域瀏覽器」,因此需要雄蕊需要被諸如browserify之類的東西取代。 – stanlemon