React native 如何在React Native中使用browserified库

我有一个库，我想在一个已经被浏览的React原生项目中使用它。当我需要库时，所有的内部require（）调用都被劫持，而不是解析我包含的文件中的依赖项，React Native会尝试解析这些依赖项，从而导致它崩溃。我想知道在React原生项目中包含browserified库的正确方法是什么。

我想到的最佳解决方案是切换到webpack。正如其中一条评论中提到的，该库需要通过browserify或web pack之类的方式进行处理，因为它在节点内置（如“域”）上具有适当的权限。问题是browserify声明了一个require（）方法，而React Native也有一个require（）方法，但它在React Native中没有很好地发挥作用。切换到webpack解决了这一问题，因为他们将require（）命名为不同的名称，\uuuWebpack\urequire（），这允许处理后的版本在React Native中正常工作。

IMHO比浏览节点库更好的方法是

• 将browserify polyfills用于节点内置，如

  加密

  ，

  流

  等
• 要将

  require（）

  调用从

  crypto

  重写为

  crypto-browserify

  等
• 而React本地打包程序本身就可以将其打包

---

回购协议演示了如何做到这一切。

如果您决定使用ReactNativify建议的方法（如所建议），那么您应该了解一些注意事项和提示（最初发布）：

1） 我按照问题列表中的建议，将

transformer.js

分为两部分：

transformers.js（在

/config

中，并从

rn cli.config.js

调用）：

babel-transformer.js（也在

/config

中）：

2） 正如您在上面的代码中所看到的，我还演示了如何使用

babel插件模块解析器

注意，我将使用此插件，而不是本机使用的插件。它允许您引用本地文件，并使用适当的引号编写，允许使用与JS不兼容的名称，如“Na钠universal”

注2或选择本评论中概述的

.babelrc

解决方案（可能是最干净的）：

---

3） 我发现我仍然需要在项目的根目录中使用

.babelrc

，以使我的Jest测试正常工作。有关详细信息，请参阅本期：

为什么不使用npm版本？所讨论的库依赖于内置的节点库，如“事件”或“域”，而“事件”之类的内容可以作为依赖项添加并正常工作，“domain”实际上是“domain browser”，因此需要用类似browserify的内容替换雄蕊。请共享web包配置和在React Native中创建捆绑包的命令。我在使用React Native的网页时遇到了一些错误。你可以看到我在这篇PR中尝试了什么：谢谢，我按照你的要求做了。如果您同意，您可以删除否决票。建议改进，然后否决票和离开@loki有点粗鲁。您可以共享您的网页配置吗？我在我的核心节点模块上尝试了browserify和webpack捆绑包，但它仍然在react本机版本apk中抛出相同的错误。在调试模式下运行良好。如何使用网页包捆绑react本机组件。？

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
    };
};

'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
    };
}