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
Related
I am trying to install jquery and jquery-slimscroll packages to an Angular project (version > 10), but the packages are not seems to be installed properly. So, regarding to this issue, could you please clarify me about the following issues below?
Assume that I have the following client structure:
ClientApp ---
|--- node_modules
|--- package.json
|--- angular.json
1. What is the proper way to add jquery and jquery-slimscroll to the project?
Should I run npm install on the ClientApp folder? Or is there a better way for the latest Angular versions?
2. I think there are several ways to add these packages as script like the following:
in angular.json:
"scripts": [
".../jquery/dist/jquery.min.js",
".../jquery-slimscroll/jquery.slimscroll.js",
]
Is it not a good approach to add them like this? Should I add them in npm as in the 1st question?
3. What about the packages.json? Some packages are added to packages.json instead of angular.json. What is the difference and why some packages are added another?
First of all, you have to understand the function of angular.json and package.json.
Angular.json
A file named angular.json at the root level of an Angular workspace
provides workspace-wide and project-specific configuration defaults
for build and development tools provided by the Angular CLI. Path
values given in the configuration are relative to the root workspace
folder.
Package.json
Initially, this package.json includes a starter set of packages, some
of which are required by Angular and others that support common
application scenarios. You add packages to package.json as your
application evolves. You may even remove some.
The package.json is organized into two groups of packages:
Dependencies are essential to running applications. DevDependencies
are only necessary to develop applications.
So, for the questions of the proper way to add these jquery dependencies, you can do both, the npm install jquery or add to the package.json and if needed to the angular.json.
The difference of both ways is that if you use npm install jquery it will add the dependencies automatically and download the packages to your node_modules, you add it manually, you will need to run npm install anyway, tp get the packages.
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.
OK so, I have a WordPress site which a custom theme and several custom plugins (mu-plugins to be exact) which all use the exact same build processes. That is to say, they all have package.json files and use webpack. Technically there are a couple gulpfiles but I am migrating those to webpack configs.
So I want to be able to deploy my app, and after composer install all the plugins and theme, I would have a node script run which would:
Install all the NPM packages the build processes need - but install them globally
CD into the custom theme's src directory and run webpack --config webpack.production.js to build the theme's assets
CD into each of the custom plugins' src directories and run web run webpack --config webpack.production.js to build each plugin's assets in their respective locations
By doing this, I hope to
avoid committing compiled assets to my repos
avoid committing 3rd party packages to my repos
cut down on deployment time (because all packages would be installed globally, and only 1 time vs in each location)
I have already written the node scripts which:
installs the NPM packages
sets the node_path and node_prefix settings so my webpack (and gulp) scripts know where to find things
and CDs into each location and runs something like
This script simply runs child_process('webpack --config webpack.production.js' {cwd:' whatever/plugin/src'})
Now, the issues I having are (and how I have fixed some of them):
while my init node script could find node modules, the spawned processes that ran webpack could not
fixed this by setting NODE_PATH before the npm run command or by adding the node path via export in my .profile scrip
webpack files were unable to find the various loaders
fixed this by adding the global node path to the resolveLoaders option
my scss files couldn't find 3rd party packages like bulma
I fixed this by including the global node_modules path into the includePaths arg for sass-loader
The last, well most current issue I am facing is with webpack and vuejs.
I get this error:
ERROR in (webpack)/node_modules/timers-browserify/main.js
Module not found: Error: Can't resolve 'setimmediate' in '/usr/local/bin/npm-global/lib/node_modules/webpack/node_modules/timers-browserify'
# (webpack)/node_modules/timers-browserify/main.js 54:0-23
# /usr/local/bin/npm-global/lib/node_modules/vue/dist/vue.js
# ./src/js/entry.js
# ./src/entry.js
timers-browserify is apparently a dependency of VueJs. My entry js file has this vue import:
import Vue from 'vue/dist/vue';
and that appears to be throwing the error. If I remove it then webpack compiles everything as expected. If I install my node_modules in that folder (there is a package.json file in there) then it also compiles as expected.
I have already updated my webpack config to "resolve" module and loader dependencies to use their globally installed locations:
resolve: {
// Configure how Webpack finds modules imported with `import`.
modules: [
'/usr/local/bin/npm-global/lib/node_modules',
path.resolve(__dirname, 'node_modules'),
],
},
resolveLoader: {
// Configure how Webpack finds `loader` modules.
modules: [
'/usr/local/bin/npm-global/lib/node_modules',
path.resolve(__dirname, 'node_modules'),
],
},```
So it seems that Vue, or maybe some npm packages in general seem to have some expectations of where certain node_modules live?
This is likely going to be a continuous issue with the path I have decided on so I want to know whats causing it or what to look for?
One way I can fix this is by symlinking my globally install node_module folder into each plugin/theme. But I still want to know what is causing this as this entire process has exposed me to a couple concepts that have just helped me in general so I feel like the answer to this problem might also do the same.
There are many dependencies and devDependencies in my project and I would like to package my project folder with electron-packager in asar mode.
While doing so, does it automatically exclude devDependencies?
Thank you in advance.
Dev dependencies are not included by default in electron package made with electron-packager.
Source: https://www.npmjs.com/package/electron-packager
If you put them [the node modules] in the devDependencies section of package.json, by default none of the modules related to those dependencies will be copied in the app bundles. (This behavior can be turned off with the --no-prune flag.) In addition, folders like .git and node_modules/.bin will be ignored by default.
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.