I am trying to learn tools such as bower/grunt/requirejs in order to speed up the development process for my website and to make my code more modularized/efficient. I am currently following this tutorial. How does one make Bower only install the dist folder for my dependencies (setup in my component.json file) instead of the entire Git repository?
What you're looking for is the ignore property in bower.json: https://github.com/bower/bower.json-spec
The developer of the module can use the ignore attribute to exclude files when the module is downloaded and installed through Bower.
If you are the developer of said module, you can use the ignore attribute to exclude everything but the dist folder.
If you're not the developer of the module, then there's not much you can do, you will get whatever the developer of the module has deemed significant. In most cases, this is not a problem.
Here's a typical configuration for the ignore attribute:
{
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"package.json",
"src"
]
}
Bower does not provide any option to do that. Mostly because they have refused to.
All we are left to is hacky ways to deal with it, like grunt-wiredep, which doesn't solve the problem in a strict sense.
Good luck!
From Bower's api documentation, there doesn't seem to be anything to say "Install just the dist folder".
As you are using Grunt already, you could probably create a task to run after your bower install using grunt-contrib-clean to remove unwanted files and folders from the bower_components folder.
Something like this should remove everything from the bower_components folder except dist folders:
clean : {
dist : ['bower_components/*/*', '!bower_components/*/dist']
}
While looking into this I also found grunt-bower-task which seems to do exactly that. The only drawback I see to this method is that you have to create the bower.json by hand first and then run the grunt task.
This doesn't answer your question directly, but may help with what you are trying to accomplish.
There are two plugins: grunt-wiredep and grunt-wiredep-copy which can help you manage your bower dependencies. These automagically add the dependencies to your HTML, and can then grab the required minified ones and copy them to your dist folder.
I am however struggling with some aspects of this at How to manage bower dependencies when developing and deploying with grunt and a dist project folder?
Related
Yes, I've seen a dozen questions on this exact subject, I'll list a few dozen below:
How to enable Node.js code autocompletion in VSCode?
There is no intellisense in vs code node js
Visual Studio Code Intellisense not working for Javascript
All of these questions have the same answer: install #types/node, which makes a package.json and a node_modules folder.
I want to work on a simple script, one that will be one file, starts with a node shebang, and has no package dependencies. I'm working in a dropbox folder. I don't want to create a hundred-thousand subfolders under node_modules that my dropbox has to sync because no one knows how to write a package without a dozen redundant dependencies anymore. I'd be perfectly fine with installing the types package globally, but I have yet to see that function without an absolute path to the node installation (dropbox folder, remember?).
Is there a way to enable autocompletion in VSCode without needing to install packages as a sibling in the folder structure?
Apparently creating a jsconfig.json file as follows in the same folder will allow one to enable node.js autocompletion without needing to install anything. (Though I did do this after globally installing #types/node, so that might be required.)
{
"typeAcquisition": {
"include": [
"node"
]
}
}
This will apparently tell VSCode to automatically search for and include the given types? Either way, it enables node.js autocompletion.
I have a snowpack project that I started from the blank template. My index.js file calls a function from another module I'm developing that I have installed using npm link.
When I change a file in the other module, it doesn't get updated in snowpack. Even when I restart the dev server, it doesn't update. I have to restart snowpack with the --reload argument to clear the cache.
How do I make sure changes to files in node_modules get recognized by snowpack so that they are rebuilt?
Unfortunately the way Snowpack works is it caches the node_modules dependencies and rarely rebuilds them.
In the documentation section Using NPM Dependencies
Because your dependencies rarely change, Snowpack rarely needs to rebuild them.
Each build tool has its pros and cons, and Snowpack is not going to work for you, in this instance where you still need to update the linked dependency.
You might want to look at other build tools like Webpack. Here is stack overflow answer on correctly configure Webpack to watch only for the linked dependency.
It seems that even the Parcel 2 doesn't detect changes in linked dependencies.
You can delete .cache/snowpack inside node_modules folder for rebuilding. More concise you can delete specific folder which you want to make it rebuild, This is only hack I found that works.
What i want is to have a library locally that when i change it those changes are reflected in the project that is using the library.
i have check out this library here in my local machine: https://github.com/manfredsteyer/angular-oauth2-oidc
So what i'm doing right now, is that i go to the library directory and then
npm link
And then get in my project directory and do
npm link angular-oauth2-oidc
The library folder appears inside my node_modules folder but i can't manage to use it, since when i start the app ng serve it says:
Cannot find module 'angular-oauth2-oidc'
I'm importing like this:
import { OAuthModule } from 'angular-oauth2-oidc';
I've tried to add the the path under the compilerOptions of the tsconfig.json file but haven't been sucessful.
Any ideas on what i'm missing here? I've tried several suggestions i've found on angular github issues but none solved my problem.
Thanks in advance
npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed
Dont use npm link to add a library to your project, use npm install :
npm install angular-oauth2-oidc --save
You have to install it not just link it, so use this line to with flag --save to ensure that it will be saved in your package.json
npm install [package_name] --save
You can get the package name from the source website or from
https://www.npmjs.com/package/angular2
When you say:
So what i'm doing right now, is that i go to the library directory and
then npm link
Do you mean you are executing npm link in the folder you cloned the repository in? Because if so, that's likely your issue as that's the source directory and not what's actually published as a package. You must build the library, change directory into the distribution folder for the package, and then run npm link. Then when you run builds of that library, any Angular applications with that linked will automatically have the last version of your build in their node_modules.
Also, in your Angular applications where you are using the linked library you'll want to make sure you are setting preserveSymlinks to true in your angular.json.
While you can create multiple projects (e.g. an Angular app and an Angular library) under one Angular project to make this process a bit easier, I prefer to separating these two since I like one git repository to present one module.
First, you need to link your modules to your project's package.json file. Here's how to link files locally in general:
Local dependency in package.json
Linking a plain Typescript library is pretty straight forward as you just create an entry point (usually index.ts) file and export everything you want from there. This file needs to be in the same folder as the package.json file in your project.
An Angular library is a bit different as angular modules needs to be compiled before it can be properly exported. If you just import the module to your project without compiling you will get an error stating this: cannot read property 'ɵmod'. This happens at least at the time of writing this.
So we need to compile the library and then link it:
open two terminal windows
in the first terminal, go to your Angular library's root folder and run ng build --watch
check the output folder of the compiled module, usually something like dist/[library name]
change your Angular project's package.json to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
run npm install in the same folder
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
Otherwise you'll get errors like Error: Symbol MyComponent declared in /path/to/library/my.component.d.ts is not exported from my-angular-library
in the second terminal, go to your Angular project's root folder and run ng serve. Make sure you serve the project only after you have installed the local dependency.
You should now be able to use components, services etc. exported via your library module.
TL;DR
for the library ng build --watch
make the library dependency to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
npm i
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
ng serve
I am looking through the documentation and features for jQuery Globalize (https://github.com/jquery/globalize) and although it is a bit heavy and complex, it seems to do most of what I want.
The problem is maintenance.
As I understand it, to have access to each of the modules (messages, numbers, etc), I must first run the build in order to acquire a ./dist folder. So in my company's automated build system (largely ant-driven), the following steps would be required:
Ensure Node installed
Ensure Grunt and Bower installed
Run both npm install and bower install
Modify the grunt task to exclude the failing "commit" task (why do they even want an automatic commit on build?)
Run the whole grunt to get a ./dist folder
Execute my project grunt file, which copies the files out of this dist and further processes them
This is rather heavy when all we really need are the files ultimately found in dist. The bigger problem is that an update of the plugin then requires downloading the repo again and running through the same process and hope that dependency fetching and grunt build execution tasks don't fail.
Does anyone familiar with globalize know a better way to do this that's more future-proof? Any idea why the dist files arent' just part of the repository?
As mentioned directly in the README.md file, you need to go to a "tagged branch". This means going to the "releases" tab of the repository and picking an appropriate release. This will download a versioned release which includes the dist folder.
Clicking the "download" button in the sidebar will only retrieve the master development branch, which is not tagged and does not include dist.
As of this writing, the tagged branches found on the "releases" tab are at this link: https://github.com/jquery/globalize/releases
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.