How to publish js + assets files to npm - javascript

I've developed a small Ui component for internal use in a company and published it to npm but when I install that package I only get an index.js file in node_modules folder.
I'm not using any package builder, es-modules, just a straightforward .js and .css
The folder i want to publish as the package has the following structure:
package
- src
- index.js
- index.css
- assets/
- fonts/
- ..some fonts
- images/
- icon.svg
- package.json
``

Use npm publish --dry-run to see what npm thinks it should be publishing. (Another possibility is to use npm pack and then examine the contents of the resulting tarball.)
If you have files missing, check the contents of any relevant .npmignore file or a .gitignore file, either of which might cause npm to ignore a file. (Read the relevant npm docs if you are not familiar with how that all works.)
Lastly, check your package.json to see if there is a files: entry, "which is an array of file or directory names that should be included in your package" (according to the docs previously linked). If you have a files: entry, add the files you want published that aren't being included.

Related

How to use NPM in conjunction with PHP/STATIC web site directory strucure?

I have php web site with a structure like
/
css/
js/
index.php
if I do, for example,
npm init
npm install bootstrap#4.6
it will create additionally
/
node_modules/
bootstrap/
dist/
css/
js/
...
What next? Should I cahnge all paths within php-s to this strange long path node_modules/boostrap/dist/js or there is a way to copy required files to topmost directories js/ and css/
Normally you wouldn't use node_modules directly. Instead, you'd have a build step with a bundler like Webpack, Rollup, Vite, Parcel, etc. that knows how to bundle your site's assets with assets in node_modules into an optimized set of files for delivery. One reason for that is "tree shaking" — bundling up and include only the parts of the modules you have in node_modules that you actually use in the code. The other is that node_modules has a lot of files in it (READMEs, etc.) that there's just no reason to include on your site (provided you're giving all necessary attribution somewhere).
You could cherry-pick the files you need from node_modules (at least in some cases), but it's labor-intensive. You'd be better off finding deployment-ready versions of the modules you want. Another option is to use unpkg.com which provides a CDN for npm modules.

copy package.json while building js library with parcel js

I am creating a typescript library, and when I am bundling it with parcel.js, the package.json file is not getting copied into the dist folder. Can any one let me know how can it be done?
You could accomplish this by using the copyfiles package and modifying your build script to copy the package.json file to the dist folder after parcel runs. (e.g. parcel build && copyfiles package.json dist).
However, the reason why parcel doesn't support this out of the box is that you probably don't want to do this. When you're making and publishing an npm library, there are a number of fields in your package.json that have special meaning - especially "main", but also "types" and "module". When you publish your library, you want to make sure that these fields point to the right thing.
When you run parcel build, parcel looks at these these fields in your package.json to decide where to put the output files.
So if you then copied your unmodified package.json file to the dist folder and tried to publish the dist folder as if it were your package, things would be broken for your users - the package.json's main field would point to dist/outputbundle.js, but the actual file would be at /bundleoutput.js.
If you want publish only a subset of the files in your project, the typical way to do this is to use the package.json files field to "whitelist" which folders get included when you run npm publish, without modifying the package structure (see docs).

Package only certain directories with asar in an Electron application

I have an Electron application where I am trying to use asar to package the node_modules and sources directories excluding the other directories.
I noticed when building the application with asar enabled, the whole app directory is packaged. This is not ideal because some executables and DLL's need to be available outside the asar file.
What I've tried
Currently, I have a script that packages the sources and node_modules directories (using asar). This script is executed after Electron-Forge has built the executable. But Electron does not seem to automatically check the asar file for source and node_module files. I receive the error "Error: Cannot find module index.js". This gives the wanted file structure, but does not work with Electron (see "File structure" below).
File structure
File structure before creating executable:
- node_modules/
- sources/
- executable/
- images/
Wanted file structure after creating executable:
- resource/
- app/
- executable/
- images/
- sources.asar
- node_modules.asar
or the following (where the app.asar file should only contain the sources/ and node_modules/ directory):
- resource/
- app/
- executable/
- images/
- app.asar
And it's mainly important that Electron knows when to use the asar file and when to use the files directly. Is it possible to configure it like this, or something similar?
Question
Is there any way to configure Electron/Electron-Forge to only package certain directories into asar files while copying the other directories into the resource/app directory?
In your package.json in "build" section add the following code:
"build": {
"asar": true,
"asarUnpack": [
"**/thefirstfolder/secondfolder/**/*"
],
},
This "**/thefirstfolder/secondfolder/**/*" will unpack everything that is the child of secondfolder

Why all files of my npm package are installed in node_modules?

Here is what I have in node_modules when I install my package:
Even though I am using this files field in package.json:
"files": [
"./dist"
]
Why is that?
Maybe you misunderstood what the files field does:
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
The files field is used to define files that should be imported alongside your library when another project install your project as a npm package.
Thats how module works.if you don't like node_modules folder try Yarn2 .
Same thing.but different module folder name.
Thats how npm works. All yours external dependencies will be downloaded to node_modules.
https://medium.com/maxkimambo/how-does-node-module-loading-actually-work-8aa63849f5ae#:~:text=Modules%20are%20the%20building%20block,are%20using%20ES6%20Javascript%20code.&text=included%20in%20your%20app.,can%20have%20their%20own%20package.

yarn publish <folder>.gitignore overriding .npmignore

I'm trying to publish a module I have created.
The module has multiple entries in it and I want to publish from within my build folder.
Every time I try to publish with yarn. I get:
Output:
The following paths are ignored by one of your .gitignore files:
build/package.json
Use -f if you really want to add them.
I tried yarn publish build
And also cd build && yarn publish where I copy the package.json and npmignore and all the relevant files.
It's always the same result.
I have a .gitignore in my root and an .npmignore in my root.
If I publish the build folder from the root it works but I dont want the path to include the build/lib folder.
If I do yarn build && cd build && npm publish && cd ../ that will also work.
But I'd rather use yarn.
Does anyone have a solution for it?
All I want is to publish my already created build folder content. I have all the needed files there.
EDIT
After much research and looking into other packages,
I ended up just creating a small copy script that copies my essential files to a build folder and clears up my package.json from all unwanted items.
Then my ci publishes from the build folder.
That was our solution that we've implemented

Categories

Resources