Managing javascript dependencies - javascript

I am using Yarn. I have a project that needs the latest developments of the deck.gl project (i.e. something that has not yet released).
I tried:
1- To clone the repo, build it and publish the different modules in a registries but I (legitimately) do not own the #deck.gl scope - so it seems that route is not possible.
2- To clone the repo, build it and then add the various module directories to my project using:
yarn add file:/Users/alleon_g/0x-TechWork/deck.gl/modules/core/
but that seems to create issues with dependencies of that module
yarn add v1.13.0
[1/4] 🔍 Resolving packages...
error Couldn't find package "luma.gl#^7.0.0-alpha.14" required by "file:/Users/alleon_g/0x-TechWork/deck.gl/modules/core/" on the "npm" registry.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
What is the proper way of using the latest modules of a project that has not yet published its components?
Guillaume

Related

Can I use specific version of VUEJS in Laravel project?

I am new to the VUEJS and learning it by torrent.
The author use docs from old version https://ru.vuejs.org/v2/guide/components-custom-events.html
for example .sync was added only in 2.3.0 version
<text-document v-bind:title.sync="doc.title"></text-document>
Can I use specific version(like 2.2) of VUEJS with laravel project?
Laravel uses NPM (node package manager), and any module gets into node_modules directory.
Install Node.js.
Open terminal and cd into your project root.
Then just run:
npm install --save vue v2.3
Note that above may fail if there is a dependency conflict (and fixing that is out of the OP's scope).
So, it doesn't matter that you are new to Vue as long as you know enough to prepare Laravel (and can ensure it's package.json does not conflict).

Package Angular 6 library without dependencies

I have an Angular 6 library which contains couple of modules with its routes. This library also works as a standalone application.
I have used ng-packagr to pack and publish the library. When packing all the dependencies included in package.json dependencies also gets shipped and is installed when consumed by an application.
This behaviour results in duplication of angular core libraries and app does not start.
One of ways i have handled is include all the dependencies as devDependencies in package.json, so they wont get shipped. Is there any better way to handle this without moving to dev dependencies ?
It looks like having dependencies as devDependencies is the solution for now, as having just peer dependencies works when inported as a library but it doesn't install deps when using in an application.

lerna link vs. lerna bootstrap

I have a Lerna project which until recently was using lerna bootstrap --hoist. This worked well but I found the devDependencies in the many sub folders were mostly identical. Upgrading to Lerna v3 I read about lerna link convert.
Does lerna link convert simply move all the sub folder devDependencies into root, and sub folders scan the parent node_modules to load them (a feature of NPM)? I've noticed dependencies within the sub-folders are changed to "file://" instead of the private npm store which indicates once published and consumed they wouldn't be loaded.
Also if lerna bootstrap is dropped then dependencies within the sub modules aren't installed. What method is used to resolve this?
My recommendation would be to take advantage of Yarn Workspaces' ability to "hoist" packages to the root level. This will prevent having identical dependencies nested in your packages.
Here's a completed example and the associated tutorial.

Create shared library with Webpack's DllPlugin

I want to create a core NPM package that contains all dependencies which rarely change, e.g. Angular. Since different projects will use this NPM package and Webpack is the preferred bundling and build tool, I thought Webpack's DLL plugin would be a good choice.
But somehow the consumer packages cannot resolve the contents of the library package created with the DLL plugin. I've created a minimal example here https://github.com/matoilic/webpack-dll-example. The core module only contains Angular and the consumer module should then be able to use Angular from there. But the build of the consumer package fails with the error, that 'angular' could not be found.
Module not found: Error: Can't resolve 'angular' in '.../packages/poc-module/src/application'
Does anyone have an idea what the issue could be?
It seems like the DLL plugin doesn't handle symlinks properly. In my case, I have a mono-repo with multiple packages which are linked to each other.
https://github.com/webpack/webpack/issues/3489
The workaround is to create an installable package through npm pack and to install the resulting archive instead of using npm link.

What is the step-by-step procedure for installing any npm module with Aurelia CLI?

I wanted to install jquery and found instructions here:
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/4
I then wanted to install "moment.js" and found instructions here ( I am not using typescript) :
How to import Moment-Timezone with Aurelia/Typescript
To install both of these with the Aurelia CLI the procedure is to install the respective npm module and then to manually modify aurelia.json in some way so the app recognizes it.
In the case of moments the instructions then say to place an import at the top of app.js , but this is not the case for JQuery.
First off , is there any way the changes to aurelia.json can be automated ( like a regular node.js package.json) so I don't need to manually do it and second, how do I know what modifications I am expected to make to aurelia.json ( or app.js or any other file) for the module I want to install?
With a basic node.js app its pretty simple , just npm install. With Aurelia its much more confusing.
Edit: There is also JSPM which I've read is used for front end libraries like the ones I mentioned above. However, the links with instructions for installation that I posted are not using JSPM.
Edit
I found some of the answers here:
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/6
The CLI is still under development. I think the automatic adding of a package might some day be included in the CLI itself, for example with an install command.
The extra registration is required to register the package correctly for usage with RequireJS (http://requirejs.org/). And if the plugin exists of more than just 1 file, this registration is a bit more complex then just adding the name of the plugin.
There is an experimental CLI task here https://github.com/martonsagi/aurelia-cli-pacman that will do the automation for you.
Which can be installed by running:
npm install aurelia-cli-pacman -D
The above will install the package manager and register/ include itself in the tasks in your current project (be sure to run it with install, because npm won't run the post install script if you run it the i shorthand). Next, you can run the following command to install an extension:
npm i aurelia-interactjs -S
au pacman i aurelia-interactjs
The only downside for many might be that currently there aren't that many registry entries, but I think the author of the package would be very happy if you help him out by creating a pull to extend the registry. Would take you some time to figure out what would be the correct install/ import settings, but you will help out someone else and make them happy when they hit the same problem you experience :-).
JSPM has a same sort of issue around this, only is more matured/ the registry is bigger and/ or authors added specific information for JSPM installations to their package.json. For example: To install the above plugin with JSPM it will use the following highlighted section https://github.com/eriklieben/aurelia-interactjs/blob/master/package.json#L72,L86. The same is currently not possible with aurelia-cli, because the installation is done by NPM instead of through JSPM that redirects it to NPM.
If the author of the plugin didn't specify the JSPM section in the package.json, you would most likely and up with the same sort of issues. JSPM has a similar registry (https://github.com/jspm/registry/tree/master/package-overrides/npm) as aurelia-cli-pacman.

Categories