Develop Reference

Yarn install Lerna monorepo directory with local dependencies

I have a monorepo that has 20 visual components built using Lerna. This component library is being used by another app repo and is included in it's package.json
I'm pulling in a single component from the component library into the app using a Yarn 2+ feature in package.json:
"#author/component-a": "git+ssh://git#github.server.com:Author/component-lib.git#head=feature/updated-component&workspace=#author/component-a",
We want to push to a branch on Github rather having to publish to npmjs every time we need a change in the app. This reason we want to take this approach (rather than something like yarn link) is because we have a staging environment that we want to build with the changes in the branch.
The component library file structure looks like:
packages
component-a
package.json
component-b
package.json
package.json
Where packages/component-a/package.json looks like:
{
"name": "#author/component-a",
"version": "1.1.0-alpha.1",
"description": "Component A",
"author": "Author",
"license": "MIT",
"main": "dist/index.js",
"files": [
"dist"
],
"dependencies": {
"#author/component-b": "1.1.0-alpha.1"
}
}
and packages/component-b/package.json looks like:
{
"name": "#author/component-b",
"version": "1.1.0-alpha.1",
"description": "Component B",
"author": "Author",
"license": "MIT",
"main": "dist/index.js",
"files": [
"dist"
]
}
I've been trying ways to get the build to refer to the local files rather than the ones published on NPMjs:
packages/component-a/package.json
"dependencies": {
"#author/component-b": "file:../component-b"
}
Which works fine locally (building in the component library, but downstream building in the app, via a branch it breaks.
Question: How can I get a downstream app to pull in other components defined defined in the same repo from a monorepo without publishing the packages (to NPMjs) and working only via a branch.

How to properly expose subpaths in package.json using the ”exports” key?

I’ve released a NPM package which is a plugin for a framework where only the main entry of my package.json is needed for usage in the framework and its environment. I also want to be able to use a subpath of the plugin in order for users to be able to use the plugin outside of this framework as well, which will require that the main entry point is never initialized as there are framework specific dependencies used there which I don't want to initialize when using this plugin outside of the framework.
My project structure looks like this:
.
├── index.js
├── submodule.js
└── package.json
Source code for the sake of this example looks like this:
// index.js
export default function () {
return "foo";
}
// submodule.js
export default function () {
return "bar";
}
// package.json
{
"name": "my-package",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"exports": {
".": "./index.js",
"./submodule": "./submodule.js"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "MIT"
}
According to Node.js documentation on this matter, this setup should allow me to use my package like this:
import myPackage from ’my-package’
import mySubModule from ’my-package/submodule’
In order to be able to test my package locally I run npm link in the project root of my npm package and then in another project i run npm link my-package. Now that I try to run the project (using parcel-bundler) that imports my-package and my-package/submodule like in the example above I get the following exception:
Cannot resolve dependency 'my-package/submodule'
I'm using NVM with Node v.12.18.4 and NPM v.7.15.0. I have also tried with Node v.14.17.0 but the issue persists. What am I missing?

It seems that the project setup is correct and that the problem lies in the parcel-bundler which does not support package.json#exports yet. There's currently an open issue on this matter.

package.json - how to determine what parts of the module are installed

I have a project structure like this:
__tests__
example
src
.bablerc
.eslintignore
.eslintrd
.gitignore
package.json
package-lock.json
README.md
and package.json parameters like:
{
"name": "",
"version": "0.0.1",
"description": "",
"main": "src/index.js",
"scripts": {
"test": "jest"
},
"files": [
"src/"
],
"repository": {
"type": "git",
"url": "url"
},
"jest": {
},
"devDependencies": {
},
"peerDependencies": {
}
}
When I npm install this modules I only get src folder with an empty index.js file. The goal was to only have the user install all of the src folder and not the example part since that is an example app. I thought that "files": ["src/"], would solve this. However it's not doing what I would expect. I don't see anything that is in the src folder. It's empty!
npm docs say:
The optional files field is an array of file patterns that describes
the entries to be included when your package is installed as a
dependency. File patterns follow a similar syntax to .gitignore, but
reversed: including a file, directory, or glob pattern (*, **/, and
such) will make it so that file is included in the tarball when it’s
packed. Omitting the field will make it default to [""], which means
it will include all file
How do I allow the user to install all of the src folder and ignore the example folder?
I'm on npm 5.6.0 and node v9.11.2

Almost there! Files entry behave like in a line a .gitignore. That works:
"files": ["src"]
For testing purposes, you can run npm pack --dry-run to check in the pack reports what files would be included when running npm install on the package you're developing.

how to add directory in package.json to publish in npm

When I try to publish a module in npm repository it is not taking lib folder. I added it in package.json file as below but it is not taking that lib folder. Lib folder contains files that are used by module.
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "sample.js",
"directories":{
"lib": "/lib"
}
}

remove the / from lib, so your package.json becomes
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "sample.js",
"directories":{
"lib": "lib"
}
}

Add the files to package.json
{
"files": [ "lib" ]
}

For files or directories ensure the path or paths are specified as expected. Rather than /lib you probably want ./lib. Verify the files and folders you want to publish are not being ignored by a .npmignore or .gitignore dotfile in the lib directory of your project. Also, if there's a separate package.json file in lib you'll wan to check that too.
For more information see:
https://docs.npmjs.com/files/package.json#files
https://docs.npmjs.com/files/package.json#directories

CryptoJS with Bower, how to manage this dependency?

I need to manage CryptoJS with Bower. This project is hosted on code.google.com. Can be downloaded as zip file or through the SVN.
Can Bower download an uncompress the zip file or download all components from the SVN and put them in the crypto folder?
.bowerrc file, defining the download folder:
{
"directory": "app/vendor"
}
I've tried this component.json file (fails, downloads the page itself):
{
"name": "Backbone Client",
"version": "1.0.0",
"dependencies": {
"crypto": "http://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/"
}
}
Another try (hmac.js overriders core.js and it's saved as index.js):
{
"name": "Backbone Client",
"version": "1.0.0",
"dependencies": {
"crypto":
"http://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/core.js",
"crypto":
"http://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/hmac.js"
}
}

Found the way reading Bower official page:
As you can see, packages can be installed by name, Git endpoint,
GitHub shorthand, URL or local path. If you install from a URL that
points to a zip or tar file, bower will automatically extract its
contents.
component.json:
{
"name": "Backbone Client",
"version": "1.0.0",
"dependencies": {
"crypto-js": "http://crypto-js.googlecode.com/files/CryptoJS%20v3.1.2.zip"
}
}