Sharing code between React Native + Node

落爺英雄遲暮 提交于 2021-02-19 02:27:22

问题


I am using React Native and Node.js. I want to share code between the two. My folder structure is as so.

myreactnativeapp/
mynodeserver/
myshared/

In the react native and node apps I have included the package.json

"dpendencies" : {
    "myshared": "git+https://myrepository/ugoshared.git"
}

This can then be included in each project via require/import etc. This all works fine and for production I'm happy with it. (Though I'd love to know a better way?)

The issue I'm facing is in development it's really slow.

The steps for a change to populate are:

  1. Make changes in Shared
  2. Commit Changes to git
  3. Update the npm module

In development, I really want the same codebase to be used rather than this long update process. I tried the following:

  1. Adding a symlink in node_models/shared - doesn't work in react-native package mangaer
  2. Using relative paths ../../../shared - doesn't work in react-native package mangaer

Any other ideas?

Update 1

I created a script.sh which I run to copy the files into a local directory before the package manager starts. It's not ideal but at least I only have to restart the packager instead of messing with git etc.

#myreactnativeapp/start.sh    
SOURCE=../myshared
MODULE=myshared

rm -rf ./$MODULE
mkdir ./$MODULE

find $SOURCE -maxdepth 1 -name \*.js -exec cp -v {} "./$MODULE/" \;

# create the package.json
echo '{ "name": "'$MODULE'" }' > ./$MODULE/package.json

# start the packager
node node_modules/react-native/local-cli/cli.js start

Then in my package.json I update the script to

  "scripts": {
    "start": "./start.sh",
  },

So, the process is now.

  1. Make a change
  2. Start/Resetart the packager
  3. Automatic:
    • Script copies all .js files under myshared/ -> myreactnativeapp/myshared/
    • Script creates a package.json with the name of the module

Because I've added the package.json to the copied files with the name of the module, in my project I can just include the items the same as I would if the module was included via the package manager above. In theory when I switch to using the package in production I wont have to change anything.

Import MyModule from 'myshared/MyModule'

Update 2

My first idea got tiresome restarting the package manager all the time. Instead i created a small node script in the shared directory to watch for changes. Whenever there is a change it copies it to the react native working directory.

var watch = require('node-watch')
var fs = require('fs')
var path = require('path')

let targetPath = '../reactnativeapp/myshared/'
watch('.', { recursive: false, filter: /\.js$/ }, function(evt, name) {

  console.log('File changed: '+name+path.basename(__filename))

  // don't copy this file
  if(path.basename(__filename) === name) {
    return
  }

  console.log(`Copying file: ${name} --> ${targetPath+name}`);

  fs.copyFile(name, targetPath+name, err => {

    if(err) {
      console.log('Error:', err)
      return;
    }

    console.log('Success');
  })
});

console.log(`Starting to watch: ${__dirname}. All files to be copied to: ${targetPath}`)

来源:https://stackoverflow.com/questions/50993487/sharing-code-between-react-native-node

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!