Not sure if this is the right place to ask this, so please bear with me.
I'm quite new to build systems/ front end workflow and have relied heavily on IDE built in systems to do the work for me such as compiling Sass to css.
I recently discovered the world of npm gulp and now need to get a project working and compiled from a "dev" folder to a "build" folder.
What im not understanding is if a install bootstrap via npm it adds
in to the node_modules folder outside of these two folders. Am I
doing something wrong here? because I cd into the dev folder but yet
it installed it in the root folder.
how do I change my tag rev files from my dev to build if I
have to get files from the node_modules
The same goes for Angular, it is installed in the node_modules folder. how do I go about accessing the code from there to my dev folder and then compiling it to my build.
This works with the way node resolve modules. If you install a module like gulp, you will have a structure similar to this:
- node_modules/
- gulp/
...
- src/
index.js
gulpfile.js
In order to import gulp into your script, you can just use require('gulp') (or import gulp from 'gulp' if you are using EcmaScript6) and node will find out where to look for this module.
You can do it both from the gulpfile.js or from src/index.js. Node will try to find the node_modules folder in the script folder, or in any parent folder.
For most front-end build systems, your node_modules folder actually sits at the root of your project folder. Your dev folder (i.e. where you put your source code) which is a sub-folder of your project root, will then be able to see npm modules installed into the project root folder.
Note that in many front-end setups I've seen, the convention is to call that dev folder src instead.
I would set it up this way, use the app folder for development purposes, while the dist (as in "distribution") folder is used to contain optimized files for the production site.
Since app is used for development purposes, all your code will be placed in app and will compile in the dist folder when you run something like gulp build
|- app/
|- css/
|- fonts/
|- images/
|- index.html
|- js/
|- scss/
|- dist/
|- gulpfile.js
|- node_modules/
|- package.json
Related
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.
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
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.
I am learning to use Gulp for web development, and has successfully set it up to optimize my assets for a production website. My folder structure looks like:
|- app/
|- less/
|- img/
...
|- plugins/
|- dist/
|- node_modules/
|- gulpfile.js
|- package.json
So currently my plugins are in the /app folder, whereas the whole site is being compiled in /dist for production. I could think of two options:
Move the /plugins folder outside the /app folder, however .html files inside the dist folder would have to link to files outside the dist in this case (e.g. ../plugins/...) which doesn't seem logical.
Copy the whole plugins folder every time I compile the project with gulp build which seems to take a while. Not sure if that's a right way to do it.
Any advice would be appreciated.
I'm a little surprised that I couldn't find this in their docs, but third party plugins should be managed by using npm.
'npm install --save plugin-name'
Arguably you might use the --save-dev flag instead
EDIT
As for third party clientside libraries, you can still use npm, but some folks prefer to use bower or other tools instead.
It is generally considered best practice to not minify the third party scripts further, but instead you'd leave them in node_modules and make that servable, copy them to your dist folder or concatenate them with your other files as appropriate to your requirements.
As for how you let index.html know where to find them, that's going to be the same as how you do it for other files and depends on your workflow. Some folks object all their scripts through a function on the server which either provides he location of the one concatenated and minified production file or an array of the separate source files and renders scripts for each as appropriate.
Currently we're developing two React-based applicaties, say app-a and app-b that has two dependencies we also manage. A shared-components package, which contains shared components, and a shared-utilities package which contains shared utilities between app-a and app-b. Both of these have their own full on package.json, and are included in the package.json of app-a and app-b.
Dependencies:
app-a
|- shared-components
|- shared-utilities
and
app-b
|- shared-components
|- shared-utilities
Each time we're developing something in for example shared-components that we want to use in for example app-a we have to perform too many steps:
Make <AwesomeComponent /> in shared-components
Build files in shared-components.
Commit/push to GitHub.
Point dependency in package.json from app-a to the specific branch.
Run npm install.
Use the <AwesomeComponent />.
If we made a mistake in developing the , we need to retart from step 1. Ofcourse we can skip the commit/push and npm install by copying the build files to the node_modules folder directly, but still, this is quite a hassle everytime we're building a component.
What workflow do you guys use or any tips/advice to speed up local development here?
Note; we're using webpack to bundle our files and babel to transpile.
What you want might be npm link.
Simply, in the shared-components set it up with sudo npm link. This creates symlinks in the global npm directories (hence the need for elevated privileges if you installed it as root).
Next all you need to do is to go into app-a and run npm link shared-components which will replace the folder in node_modules with a symlink.