Build a Node Module via NPM for a different target - javascript

I want to include the client library of the Dash cryptocurrency into a React Native application. The problem is that via npm install it builds for NodeJS, where it assumes the core modules that are simply not there in React Native. I have been told by the developers themselves that it can be built via a web build. It's isomorphic. How can this be achieved practically?

Related

What is the difference between a javascript package, node package, and react package?

Are they all the same thing? Can a node program use react package, vice versa?
JavaScript (JS) is a programing language
There are many libraries and packages build for JS; one of these is React.
Further packages can be built using as dependencies a base package, for example, "react packages" are libraries built to extend functionalities from the react packages.
NodeJs is a platform or often refereed as a "runtime" for server-side applications. It uses the JS language in its syntax
"node packages" are JS libraries built to be run by NodeJs.

Project structure when using VueJS, VuelidateJS with NodeJS/Express

My web development is principally intranet sites and web front-ends for embedded devices using NodeJS.
My current structure is to have everything in one NPM package. I run NodeJS behind Nginx, and let Nginx serve css/image/client-side-javascript files directly from public.
I'm starting to use VueJS and Vuelidate, both of which use the now ES6 modules system - e.g. import { required, minLength } from 'vuelidate/lib/validators'.
While I've (rather hackily) made these work with my current structure, I think the time has come to get into the world of Javascript build-systems/bundlers.
If I use VueJS's preferred option of WebPack, how should I change the structure of my code?
Should I have one NPM package for the frontend (generated by vue-cli init) and another for the Express backend app?
Should I put my Express App into the generated Vue frontend package?
Should I use browserify to do the job of WebPack and stay with my existing structure?
Or something else entirely?
I’m not sure why you’re intent on putting your JavaScript code in other packages. If you have an application then you can keep your raw JavaScript files in there, along with the build script(s). Someone should be able to check your application out and be able to build it.
If you’re looking to get started with a build system, then a nice “bridge” might be to use Mix, a project created by Laravel for building front-end assets such as Sass and JavaScript. It uses Webpack under the hood, but in turn exposes a more user-friendly, fluid API.
If you go down this route, then you could put your raw JavaScript files in a lib/ or src/ directory. You could then use Mix to compile these components like this:
mix.js('lib/your-entry-point-script.js', 'public/js/app.js');
Your entry point script would just be the script that requires all your other scripts and components and the script that you want “built”. Mix would then compile that and place the resultant script at public/js/app.js.
Mix itself is just a npm package, so all you need to do is npm install laravel-mix --save-dev.
You can read more about Mix at https://laravel.com/docs/5.7/mix

Bazel: Integrating with npm projects?

I'm interested in using Google's open source Bazel in my project.
My project is a monorepo that consists of three sub-projects:
Core - A truffle project.
Core.js - A JavaScript library, which includes some build artifacts from Core.
Muse - A react & redux frontend which uses Core.js.
I would like to use Bazel for the following:
Building the dependency chain as described.
Continuous integration & testing on Travis CI.
Generating documentation.
Automatically Deploying artifacts to npm and deploying Core using truffle upon releasing to a designated release branch.
A couple of questions:
How easily can Bazel integrate with existing (non-hermetic) build systems, such as: webpack, truffle, etc.. ?
What about cases in which I can't know the output files statically beforehand?
How much Bazel disrupts the directory structure and workflow that I'm used to with npm based projects?
Can it be used to do automatic deployments as described?
How complex/expertise is needed to make such a build system with Bazel?

Building an NPM package that serves both React and React Native

We are building an NPM package called Chat for a company project. It is based on a Redux reducer and Firebase.
For both web and RN the use is:
<Chat
userName={user.userName}
password={user.password}
avatarUrl={user.avatarUrl}
defaultAvatar={defaultAvatar}
defaultGroupAvatar={defaultGroupAvatar}
name={user.name}
/>
However there are differences between web and mobile:
Dependencies: RN requires react-native and other RN packages, while web requires react-textarea-autosize and other web packages. Needless to say, installing React Native's packages for web is quite an overhead.
Compilation: RN can work with ES6 but web requires babel to transpile to JS.
We thought of two different ways to go about it:
Creating a base package with the common code: reducers and utils, and then create two additional packages for web and mobile components.
Placing the dependencies from package.json in peerDependencies.
Both ways have their downsides. The first one creates a clutter of packages and the second one means the package.json is not descriptive. Any better way to go with it? What is the proper way to build cross-platform React NPM packages?

Setup ReactJS environment

I am new on ReactJS and learning from scratch. I see some using babel and some are webpack to configure as well some use yarn package manager. So can you suggest me which is better to work with react.
I just curious about configuring reactJS environment thorugh which bundle or package manager?
babel is a transpiler, webpack is a bundler and yarn (or npm) is a package manager. These tools are for different purposes. And usually we use all of them together.
React has a very handy tool called Create React App. With this tool you don't need to configure babel and webpack by yourself so you can start to learn React easily.
You can start working with react using create react app(along with official react documentation) which will provide you app structure with no build configuration. So there is no need to worry about babel, webpack. you will get all configured with proper documentation. It's up to you to use yarn or npm as package manager.
This is best place to start up with ReactJS
In older versions you need to setup react with babel and webpack but now on current latest version you can directly start with Create React App
ReactJS Installation and startup guide
Just follows steps on this page, then run HelloWorld example which is best programs to start with any new programming language.

Categories

Resources