I am trying to build my first Angular Component package using lerna and it was working pretty well until I realized I had to add "ng-packagr" to get all of the HTML bundled inline with the rest of the code. After adding that support and getting it to work now all of a sudden my files are not getting published into the tarball.
Here is my package.json
{
"name": "#custom/core",
"version": "0.0.7",
"description": "Test",
"main": "./dist/bundles/custom-core.umd.min.js",
"module": "./dist/esm2015/custom-core.js",
"typings": "./dist/index.d.ts",
"$schema": "./node_modules/ng-packagr/package.schema.json",
"ngPackage": {
"lib": {
"entryFile": "./src/index.ts"
},
"whitelistedNonPeerDependencies": [
"."
]
},
"scripts": {
"build": "ng-packagr -p package.json"
},
"files": [
"dist"
],
...
My dist folder contains all kinds of folders like this:
But then when I run a lerna publish or npm pack this is what happens:
As you can see only 1 file gets added to the tarball...
Does anyone know why this is happening all of a sudden? I've tried playing around with my .gitignore thinking maybe it was forcing the packaging to ignore these other files but it wasn't that.
UPDATE
Ok so I found that the culprit is ng-packagr. When I run my npm run build which uses ng-packagr -p package.json to build the different module packages, that CLI is also generating a package.json that goes inside of my dist folder. When the npm pack or lerna publish attempt to package everything using a package.json they must be looking at the generated on in dist rather than the one in the folder above it.
I'm not sure how I should be fixing this.
My solution was to abandon my plan to use the files key in the package.json file and to instead use a .npmignore file. Here is a copy of mine:
# Node generated files
node_modules
npm-debug.log
assets
package-lock.json
# aot files
aot
# OS generated files
Thumbs.db
.DS_Store
# Ignored files
*.ts
!*.d.ts
tsconfig.json
tsconfig-aot.json
tslint.json
*.tgz
config
src
Related
EDIT: Not sure what happened in the initial test, but .gitignore and .npmignore are now working to exclude the bin files as desired.
I have a simple NPM package which just installs a binary by downloading it from GitHub. My goal is to leave the binary out of the published package and just let the script install it. My thinking is that the install script may need to install different binaries depending on the host platform, and secondarily, there's no need to bloat the package size with the binaries.
The problem is that I can't seem to get NPM to ignore the 'bin' files. I've tried using .gitignore, .npmignore and the package.json 'files' attribute as well as placing the bin files in a folder other than bin, and it seems that NPM insists on including the 'bin' files. The relevant package.json is basically:
{
"bin": {
"my-bin": "./bin/my-bin"
},
"files": [ "bin-install.sh" ],
"scripts": {
"preinstall": "./bin-install.sh"
},
}
As a workaround, I can juggle the 'bin' directory existence like:
"scripts": {
"preinstall": "./bin-install.sh",
"prepublishOnly": "! [[ -d bin ]] || mv bin tmp",
"prepack": "npm run prepublishOnly",
"postpublish": "! [[ -d tmp ]] || mv tmp bin",
"postpack": "npm run postpublish"
}
This works, but looks ugly and makes me think I'm missing something that's leading me to go against the grain.
Is there a cleaner approach to achieve what I'm trying to do?
.npmignore should work, here are the docs. You haven't shown how exactly you've attempted to set up ignore, but it sounds like you has been trying to ignore all files inside bin/ so this is what you needed:
# inside .npmignore
bin/
I've got continuous deployment setup with Netlify and a git repo but so far no matter what I do, Netlify isn't npm-installing anything. There's no node_modules folder when I download a zip of the deploy, my site can't access node_modules, it's just not there. I've started with a random npm package (lodash) to try to get it to install but I've got nothing so far.
Netlify says that it automatically runs npm install. I've tried having no build commands and I've tried adding npm install as a build command with no results from either.
package.json:
{
"name": "netlify-test",
"version": "1.0.0",
"description": "stuff",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/electrovir/netlify-test.git"
},
"author": "electrovir",
"license": "MIT",
"bugs": {
"url": "https://github.com/electrovir/netlify-test/issues"
},
"homepage": "https://github.com/electrovir/netlify-test#readme",
"dependencies": {
"lodash": "^4.17.11"
}
}
HTML:
<!doctype html>
<html>
<head>
<title>
hi
</title>
<script src="node_modules/lodash/_apply.js"></script>
</head>
<body>
Why can't this find node_modules??
</body>
</html>
It took a while to figure this out but I discovered that Netlify does npm install into your repo root or Base directory when you have a package.json. This can be seen by changing the Build command to something like ls and reading the deploy console output (there will be a node_modules folder listed).
However, at some point after running the Build command and before deploying, this node_modules is deleted. Hence, if you use something similar to the following as a Build command, node_modules can be copied to your Publish directory:
rm -rf dist && mkdir dist && rsync -rv * dist --exclude ./dist
This copies the Base directory contents into dist, which I have set as my Publish directory, ignoring ./dist itself (it can't be copied into itself). It'd be even better if this were added as an npm script in package.json with npm run <script name> for your Build command.
Note that Base directory, Build command, and Publish directory are all under Deploys > Deploy settings or Settings > Build & deploy in Netlify.
Thanks to lastmjs for help with figuring this out.
It would be odd if node_modules WERE there. Netlify's continuous deployment does run npm install for you, if and only if there is a package.json in the root of your repository (or instead in the base directory if you set one in netlify.toml. However, it also uses a custom npm directory that is outside of the deployment directory (see how it is setup here: https://github.com/netlify/build-image/blob/master/run-build-functions.sh#L34), since deploying your node_modules shouldn't be needed for a static site at browse time - only at build time.
The intended path for a Netlify deploy is:
you have your dependency manager configuration checked into your git repo at the root of the repo (if no base directory is set in the UI or in the toml file) or in the base directory if set. This could be any/all of Gemfile.lock, package.json, yarn.lock, or requirements.txt as explained in this article about the build settings at Netlify
you do not store your node_modules in the repo. Many of those will be specific to the architecture of the build environment - and your local machine is almost certainly different than Netlify's. You'll want those generated at build time.
your build is intended to USE those modules DURING BUILD. So you use for instance dotenv to read your .env file while building, or you use gulp-cli to process your Gulpfile.js
your build completes, and you've used all the modules during build to generate standalone html/js/css/images, so you're done with them - your static html and other assets are generated in your publish directory, where the build process has intentionally not put your node modules, and thus they are not deployed. Your static website should not need the modules at runtime, so deploying the (thousands!) of files in there is not efficient or needed.
You could have a situation that requires some/one of them - e.g. a function or you could need a file from one of them even on your static site - and that's fine, feel free to copy it into the publish directory explicitly. But that is not the norm :)
I forked a NPM module and modified it in my fork. In my fork, the command gulp needs to be run to compile the module. Running this command will output the file ical-expander-dist.js into the dist folder. This file should become part of the fork package.
The adjusted package.json in my fork looks like this:
{
"name": "ical-expander",
"version": "1.1.1",
"description": "ICS / iCal / iCalendar parser / expander",
"main": "dist/ical-expander-dist.js", // adjusted path
"scripts": {
"prepare": "gulp" // added script
},
// [SNIP] - excluded irrelevant lines
"files": [
"dist/ical-expander-dist.js" // adjusted path
]
}
Now I want to make my fork a dependency of another project.
{
"name": "otherproject",
"title": "Other Project",
// [SNIP] - excluded irrelevant lines
"dependencies": {
"ical-expander": "github:haukepribnow/ical-expander"
}
// [SNIP] - excluded irrelevant lines
}
After executing npm install in otherproject's root folder, the path ./node_modules/ical-expander will contain the files LICENSE, README.md and package.json. It will however not contain dist/ical-expander-dist.js.
It looks like the prepare script of my ical-expander fork is not being run during npm install in otherproject.
So my question boils down to: How can I make sure that preparation scripts for compiling my fork are being run when executing npm install in a project that has my fork as one of its dependencies?
Sometimes it's very simple: Make sure to use npm version 5.0.0 or higher.
According to the npm changelog, npm install will run dependencies' prepare scripts correctly from 5.0.0 on.
I have a main package.json for my project. I also have a component within my project which I'm publishing to NPM, so that requires its own package.json.
package.json
index.html
-folder
--component-folder
---package.json
Both package.json files define dependancies. At the moment I have to run npm install from both my project root and from component-folder. Is there a way of making it install dependancies for both when its only run from the project root?
Try using subpackage:
{
"name": "my-awesome-project",
"version": "2.5.1",
"subPackages": [
"packages/sub-package-1",
"packages/sub-package-2"
]
}
https://www.npmjs.com/package/subpackage
I have a directory structure with a Build and a Source Folder.
Alls things Grunt, npm, bower and composer live in the Build Folder, All sources live in the Source Folder and all Things Project (i.e. README.md) live in the root of the project.
- myProject
+ Build
Gruntfile.js
bower.json
package.json
...
+ Source
+ vendor
+ src
...
README.md
composer.json
So now if i run npm install in the build Folder, npm claims my Project is missing a README, which is not true.
Also i am simply using the package.json to install npm dependencies for grunt. My project is not a npm project.
Can i somehow tell npm that it is not run in the root of the project?
Or can i tell npm that my project is not a npm project?
You have two options here:
If you have no intention to publish this package to npm then you can set private to true as described here
You can set the location of readme with the readme property as seen below:
{
"name": "app_name",
"version": "0.0.1",
"author": "your name here",
"description": "A descriptive description",
"license": "MIT",
"readme": "../README.md"
}
As far as I can tell, there's no validation on the readme property but it will squelch the warning.