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.
Related
I am creating an angular library, which is internally using the vtk.js library. I tried adding vtk.js as a peer dependency. But on installing my custom package, it is showing a warning to install vtk.js as well.
Is there any way I can make sure that the vtk.js package will also get packed inside my angular package?
You can express dependencies of your library in a 2 ways (actually 3 but devDependencies is pretty self-explained so we omit them)
peerDependencies - you can use this type of dependency if you need to express the following things:
Your library is depends on some specific version of another library
Your library will have a conflicts in case node_module contains few versions of the dependency (because of so called transitive dependency this case is possible)
You wish a developer decide on what version of the dependency to use
As you mentioned peerDependencies is not installed automatically, instead it will warn a consumer of you lib about missing dependency or incompatible version of it
2.dependencies - use dependencies if you do not care about the cases described above. Having vtk.js here guarantee that it will be installed automatically for every consumer of your lib
I have a Lerna powered monorepo which contains various packages that are published to NPM. Within this have various helper functions that live on the root of the repo and are shared by a few packages.
The issue I have is that when each package is built with Babel, the transpiled code uses require to get those helpers. Obviously this doesn't work as when a package is published it needs to be completely self contained - those helpers are not there.
Is there a way to solve this? I don't want to have to duplicate helpers between packages.
When using lerna bootstrap --hoist I still have the same issue.
Well the easiest solution i see is to create an helper workspace that you do not publish when using lerna publish.
You will be able to set this "helper" workspace as a dependency of each of your workspace, therefore avoiding code duplication.
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.
I'm using custom javascript libraries in appcelerator studio but some of them are needed in several projects.
Now I'm looking for a method to "synchronize" these files in all of my projects. To avoid having to repeat each modification in each projects
Thanks
One solution would be to isolate your custom library (as a node module) in a separate (private) git repository and define a dependency on that library in your appc project.
To create your library:
Install https://github.com/FokkeZB/appc-npm and create your library via appc-npm, eg. appc-npm lib. (this will generate a node module of your library and will enrich this module with an install hook which will copy your library file to your appc project's lib folder. Just make sure not to publish it(to a public node repo).
However, be careful, you will probably not want to publish your library in the global node repository. That's no problem, you can also install node artifacts directly from (private) github.
To consume your library:
Next you must initialize your application as an nodejs project:
npm init
This will generate a package.json
Now you can manually install your library from your private github repo.
npm install git+ssh://privategit.acme.inc:9876/projectname/<MODULE>.git#<TAG_OR_BRANCH> --save-dev
or you can list your dependency in your package.json
If I have a directive, and I wish to package it in its own node package; and then include it from another another node package containing the main angularjs app, how would I do this?
My rough idea about how to go about this is:
put the html, javascript, and css for the directive in the package folder
enable compilation of these assets - preprocessing, minification (how?)
configure as bower package
in the app folder install the bower package
how to do this locally, without publishing?
in the angular.module() statement that creates the main app, add the name of the module containing the directive
Is this correct?
Have I missed out on anything?
Your idea of how to go about this looks good to me. To answer your questions in the list:
Look at Grunt or Gulp for your preprocessing / minification needs. These are both excellent build tools. Grunt is more widely used, but Gulp is newer and gaining a lot of ground. I'd look at both and use the one that suits you.
How to use a local bower dependency w/o publishing:
In your main app's bower.json file, instead of putting a version number for your module, put the folder where it can be found on your local system, like so:
{
"dependencies": {
"my-module": "/home/me/modules/my-module"
}
}
To clarify, you refer to it as a "node package" in your question, but in reality, you are creating a Bower package. Node packages (published to npmjs.org) are for node, and unless processed with something like Browserify, won't run in the browser (and even then, the node package can't do anything the browser doesn't support, like file access.) Bower packages (published on bower.io) are specifically for the browser. You will however find packages that publish to both NPM & Bower, such as jQuery or underscore, but you can't use the npm jquery package in the browser, it's built to run in node, and vice-a-versa.