I have been wondering this for a while and i haven't found a specific answer.
I am building a whole app using Electron and React to make the ui.
My question is if i should have a 2 complete different source code for each part of the app (electron and react) because i don't know very wekk how the package electron-builder works.
To be precise, since i have installed react (and react packages related) and some others that i just use for the ui part, when i build the app for distribution, will electron include the dependencies that doesn't require? Making the final bundle bigger!
While electron-builder has configuration options to specify which files are to be included, it is not a replacement for a tool like webpack.
electron-builder creates the installer/target artefact for your platform and packs the files you have specified.
It does not sift through your node_modules via tree shaking to create a minified script that only contains the code you need.
You can compare it a with the files array in the package.json that tells npm pack which files should be put into the tarball.
In the default configuration (and I don't know if you can overwrite that, but it is surely worth a try by setting specific node modules to ignore) it will include the entire production dependencies.
Another solution than manually ignoring the react dependencies would be to hold your react app in its own directory in your project and only include the build artefact.
gui/
|_build/
|_your built stuff
|_your react stuff
|_node_modules
|_package.json
main.js
node_modules
package.json
In this case you would configure electron-builder to include main.js and gui/build. With this electron-builder should only include the production dependencies of the outer project.
Related
How to organize JS reusable components with their own dependencies in 3rd part bundles (e.g. vendor/ subdirectories) with webpack different entry files/configs?
Description:
I have following structure with entrypoints and components
app/
assets/
index.js
package.json
webpack.config.js
vendor/
my-utils-bundle/
assets/
components/
MyMath.js
package.json
webpack.config.js
In my includable within different entry files/webpack configs MyMath.js components there's node_modules/ dependency to package e.g. mathjs with following line:
import { pi, pow, round, sqrt } from 'mathjs'
....some code below...
P.S. mathjs dependency package provided in this bundle (vendor/my-utils-bundle/package.json)
Then when i run yarn dev to compile my assets in app/assets/index.js there's following error:
"./vendor/my-utils-bundle/assets/components/MyMath.js" contains a reference to the file "mathjs".
This file can not be found, please check it for typos or update it if the file got moved.
Question:
How can i use this MyMath.js components as includable class in app/assets/index.js and maybe also in other "bundles" (e.g. vendor/my-other-bundle)?
Looks that I could install this mathjs dependency also in app/package.json but then it seems that on application level i should think about bundles JS dependencies that sounds not as the best solution.
This is an open question that has been going on pretty much since the launch of Encore. Even earlier, given that according to the best practices for bundles, third party dependencies shouldn't be distributed, and left for the app to manage.
That being said, there is at least one bundle (foxy) that attempts to solve this, by hooking into the composer commands and merge dependencies when packages are installed/updated.
From its README (emphasis mine):
Foxy focuses solely on automation of the validation, addition,
updating and deleting of the dependencies in the definition file of
the asset package, while restoring the project state, as well as PHP
dependencies if NPM or Yarn terminates with an error.
Foxy retrieves the list of all Composer dependencies to inject the
asset dependencies in the file package.json
[...]
Given that Foxy does not manipulate any asset
dependencies, and let alone the version constraints, this allows NPM
or Yarn to solve the asset dependencies without any intermediary
We have a project that uses NPM as its package manager. We use Webpack to build a Javascript app that is consumed by a Rails app. The app is fully self-contained and is built to a /dist directory that is included in the package. For reasons that are out of scope of this question, the Rails app consumes this App as a UMD module, loading it via a script tag and initialising it:
App({})
The problem is that the package has a large number of dependencies. When the Rails app installs the package, it also installs all the package's dependencies, despite the fact that it doesn't need or use any of these dependencies because everything it needs is present in the App bundle.
Is there any way the Rails app can install the package (and access the app in the /dist directory) without also installing all the package's dependencies?
Note that we don't want to move all dependencies to the app's devDependencies as that will be confusing (and we may well end up with multiple ways of distributing the app, including via es6 import). Also note that we are using Yarn as our package manager.
To clarify, we are using NPM as a means of sharing versioned releases with the Rails app, however the only thing in the package the Rails app cares about is the UMD module. It is very useful for the Rails app to be able to do yarn add Example#latest and immediately pull in the latest version of our App, however it doesn't need to resolve the package or its dependencies as they are already baked into the UMD module.
I am fairly new to Angular, I am currently trying to work out how to serve only the necessary files to my deployment server.
Ideally, I wouldn't want to include the angular library in my project repo. Instead, I would like to install in the build process.
Like I said this is fairly new to me so am not entirely sure whether this is achievable or not?
Angular 2 will be a dependancy of your project. Concretely you will have some javascript files added at installation (npm install) in your ROOT/node_module directory.
They will not be include in your NPM repo if you add a root file in your project named .npmignore with at least this content :
node_modules
You can do the same for your GIT repository and a file named .gitignore with at least this content :
node_modules/
Is it possible to exclude files from a list of NPM packages in my package.json?
I have a non-browser environment that works a bit differently: every file in node_modules dir becomes part of the production package. So there's no smart treeshaking that imports only the files that I use in my code.
For instance, I use some packages which also carry a lot of tests and i18n files, most of which I don't need and like to remove from my packaged production version. However, they are still included in the end package because the whole package folder is included in the build.
I'm trying to remove as many files from the packages as I can (without doing it manually each time) to save space and compilation time. The environment I use is looping all files in the node_modules directory and adds them to the production package (all packaged using Javascript). I would like a JavaScript solution to remove these files on compilation so the end package is as small as it can be.
I would use bower to manage client-side javascript modules, instead of using npm directly.
Bower packages are simpler than npm equivalents and don't have subfolders with module dependencies. Most will include a "dist" folder with pre-minified javascript. Right out of the box your packages will be smaller than if you use npm.
If you want to go further, you can include some processing in your gulpjs or gruntjs scripts to either manually copy needed files to lib and css folder(s), or use a plugin like gulp-bower-normalize to (somewhat) automatically do the same thing.
this is probably a silly question but am new to Meteor and struggling a bit. I want to build a stellar app that tweets when you get stellar. There is a nice Javascript API stellar-lib that works on node, but im unsure how to access the modules in Meteor...
I'm also building an app with Meteor and stellar-lib and have found two options:
1) You can manually copy over the built stellar-lib.js or stellar-lib-min.js from the build/ directory from either the github repo or the node_modules folder you installed it to when you ran the npm install command.
If you do this, you will have to copy the .js file to client/compatibility, otherwise stellar-lib will not work (note: this means you can only use Stellar on the client).
2) If you need it on the server, you can also have browserify wrap stellar-lib for you, then copy the output to lib/ in your Meteor app's root directory. I did this in my repo here with gulp.
Here's a short explanation to how 2) works:
.gulp is where I'll install my NPM modules where they will be ignored by the Meteor build environment (because the folder is hidden).
In deps.js, I require the modules I would want to use in my Meteor app as I would if I was using them in a traditional node.js app. package.json defines the modules I'll install with NPM and the gulpfile.js describes a build task that will resolve my require statements and output a single deps.js file that includes my dependencies to my Meteor app's lib/ folder.