如何在React Native中使用browserified库

Question

我有一个库，我想在已被浏览的React Native项目中使用。当我需要库时，所有内部require（）调用都会被劫持，而不是解决文件内部的依赖性问题，包括React Native试图解决它们，从而导致它中断。我想知道在React Native项目中包含browserified库的正确方法是什么。

Answer 1

我想出的最佳解决方案是切换到webpack。正如在一个评论中暗示的那样，图书馆需要通过诸如浏览器或网络包之类的东西进行处理，因为它具有诸如“域”之类的节点内建命令的优势。问题在于browserify声明了一个require（）方法，该方法在React Native里面并不好，它也有一个require（）方法。切换到webpack解决了这个问题，因为它们以不同的方式命名它们的require（）__webpack_require（），这使得处理后的版本能够在React Native内正确工作。

Answer 2

恕我直言比browserifying节点库中的更好的方法是

• 使用节点内置插件一样crypto，stream，等browserify polyfills，
• a small Babel transform到require()电话从crypto重写crypto-browserify等，
• 和React Native打包程序本身将其打包。

ReactNativify回购示范如何做到这一点。

Answer 3

如果您决定使用由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