Pouvons-nous utiliser du code nodejs à l'intérieur de l'application react native?

Question

Je veux utiliser Node.js comme backend dans un projet React Native.

Answer 1

Oui, vous pouvez utiliser des packages écrits pour Node en utilisant ReactNativify comme le souligne à juste titre Big Rich. Quelques points à prendre en compte cependant :

1) J'ai suivi les conseils que j'ai trouvés dans la liste des problèmes et j'ai divisé transformer.js en 2 parties :

transformers.js (dans /config et invoqué depuis 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
    };
};

babel-transformer.js (également dans /config) :

'use strict'

const babel = require('babel-core');

/**
 * C'est l'équivalent de votre fichier `.babelrc`.
 */
const babelRC = {
    presets: ['react-native'],
    plugins: [

    // Le plugin suivant réécrira les imports. Les réimplémentations des bibliothèques node telles que `assert`, `buffer`, etc. seront prises en charge
    // automatiquement par le package React Native. Toutes les autres bibliothèques node intégrées seront réécrites en leur contrepartie browserify.

    [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
    }],

    // Au lieu de ce qui précède, vous pourriez également faire la réécriture comme ceci :

    ["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) Comme vous pouvez le voir dans le code ci-dessus, j'ai également démontré l'utilisation du babel-plugin-module-resolver.

Remarque, j'utiliserai ce plugin à la place de celui utilisé par ReactNative. Il vous permet de référencer des fichiers locaux, et écrit avec des guillemets appropriés permet des noms non conformes à JS comme 'sodium-universal'

Remarque2 Ou opter pour la solution .babelrc (peut-être la plus propre) comme décrit dans ce commentaire : https://github.com/philikon/ReactNativify/issues/4#issuecomment-312136794

3) J'ai remarqué que j'avais encore besoin d'un .babelrc à la racine de mon projet pour que mes tests Jest fonctionnent. Consultez cet problème pour plus de détails : https://github.com/philikon/ReactNativify/issues/8

Answer 2

Le projet Github ReactNativify fait exactement cela, en ajoutant un environnement d'exécution NodeJS dans les projets React-Native (RN).

* actuellement ne fonctionne pas dans RN v0.43.3 et ultérieur, avril 2017.

Voir aussi (en date de mai 2018) :

• rn-nodeify
• nodejs-mobile-react-native