Dependency manager for Web - javascript

I have 2 projects. They use same js/img files. When I change js content in first project I should also change it in second project. I wanna make it as dependency. So I deploy changes to my local repository, then goto project1/project2, call update and changes are loaded.
I have tried to use bower but it doesn't satisfy me because of some strange behaviour (it copies whole folder content and ignores main section in component.json)
How can I implement normal dependency managment in my project? note: I need to manage my local dependencies

The main property in component.json is currently only used for other tools using Bower. There is currently a discussion going if Bower should have a .bowerignore file for ignoring files it doesn't need.
You might be better of just using a git submodule or symlinking the files.
Alternatively you could check out if any of the other JS package managers fills your need: npm, Ender, volo, component, jam

Another option (if you just want to fetch single files) might be: pulldown.
Configuration is extremely simple and you can easily add your own files/urls to the list.

Related

Other way to share react ts components between projects

I have been looking for a way to mostly share some code between projects specifically for SPFX and fluent ui. We found 3 main ways to do that.
1.
Creating a component library is the way that seemed least complicated cause it uses the same infrastructure and do all building without the need to configure it.
But this adds some issues, we need to built and manually link the solution locally to make it work, this will also work if we put in a repo. so this is mitigated.
The second is that implicitly this will also require the fluent ui and react. Plus having to place it inside a SPFX component library project.
2.
I saw some promise using paths in ts and this works fine while using the ts compiler. It will go to the folder that your proj is referring and build it at calling time. which is great. But it did not work in SPFX.
3.
Another way was to have a post install to sync the folders which seems easy enough but I wonder how practical this is plus how people are doing it, if they are, how.
All I wanted to figure out now is a way to take my component code and share as if they were in a folder of my src or a simple extension of the code. No need to have extra dependencies or build steps, just the code that can be used as a ts/tsx file. ex:
shared lib:
//assuming I have react and fluentui already installed for the project.
import button from 'fluentui';
export const fancyCustomButtom = (props) => {
return (<Button text="Standard" />);
};
src project folder:
import {fancyCustomButtom} from 'shared-lib'
It is fine if it needs to build the files before we can use it but can we do it at build time or when the package is installed? also wouldn't it increase my bundle size by making both module dependent on things already available (react, fluentui)?
Given the way Microsoft have architected the loading of bundles in SharePoint and Teams - I believe an SPFX component library is the best way to share code between different solutions, particularly if you are looking to minimise bundle size...
Imagine you have a library for something re-usable: a form, a set of standard branded components - something of that nature. You could put your shared code in repos and add references to it - either by publishing your own repo publicly or using the npm install git+https://yourUrl syntax; but what effectively happens there is that your code is pulled down in to node_modules for each project, and any referenced module code is included in your bundles. If you have two, three, four or more webparts on the same page - using those same libraries, you're multiplying how many times that code is included on the page.
If you follow Microsoft's guide on setting up a component library project however, your npm link commands allow your types to be recognised in consuming projects without needing to actually include the bundled distribution code. You can deploy your library code once to the App Catalog, and if it's referenced in other solutions -- it's loaded on pages as needed: once.
I have found the development experience to be quite flaky at times, but it does work. When I run gulp clean on my library code, or come back to it after some time, I sometimes find that I need to run npm link and npm link my-project-name again as per the instructions in the above tutorial. Whenever you run gulp build on your library, you should also rebuild the project that consumes the library, either by using gulp build / bundle or by saving a file (if you're running gulp serve). This process works well for developing, and once it comes time to deploy, all you need to do is add a named reference to your library inside package.json and then deploy both .sppkg files to your App Catalog.
In terms of your last question re: bundle size - react is not actually included in the dependencies for an SPFX library project, but you will find it's available to use. When you build your library, if you take a look in the generated javascript in your dist folder, you will see it's listed as one of the dependencies for the webpacked content along with react-dom and ControlStrings. It's on line 1.
office-ui-fabric-react is included as a devDependency thanks to the #microsoft/sp-webpart-workbench package that gets scaffolded with all SPFX projects - and if you check your library's dist javascript, you will see that included components are being webpacked and included in your bundle. I'm not entirely sure if when you pull this code in to your consuming project, whether webpack then tree-shakes to de-duplicate and ensures only necessary code is included: I don't know. Someone else may be able to illuminate us there or provide a more accurate explanation of what's going on... I will update this response if anyone comments to let me know.
And finally, this is more of a personal way of working, but it may be worth consideration:
When developing a library, I sometimes reference it in other projects via a local npm install ../filepath command. This ensures that when I install the library as described, the consuming project installs any necessary dependencies. I'm able to tweak both projects if I need o. When it comes time to deploy, I commit my changes to both projects, deploy my library code to the App Catalog, and then npm uninstall the library from the consuming project and add a reference as described in the above tutorial. When I deploy projects that use my library, they just work.
I recently developed a library that uses pnpjs, in particular the #pnp/sp library that is used to talk to SharePoint. If you look at the Getting Started guide for that library, they expect you to pass a reference to your Application Customizer or Web Part context during setup, or explicitly set things up using a base URL and so forth - and of course, a library doesn't really have a page context of any sort - the whole point of this code is that it's reusable. So that poses a challenge. My solution was to do the setup in the consuming web part(s) and ensure that they pass a reference to the sp object (which is of type SPRest) to any code or components that exist in my library. My library has peerDependencies on those pnp libraries so that the code isn't duplicated in consuming projects. Sometimes you have to think about what your library needs to include in its bundle and what you expect consuming solutions to already have, and maybe find ways to ensure things aren't included that aren't needed.
For example, in the scenario you talk about, you may want to ensure fluentui or office-ui-fabric-react are only devDependencies or peerDependencies for your library. As long as your library and the project(s) consuming your library both use the right version(s) you shouldn't have any trouble, and you can document any pre-requisites with your library documentation. You can check which versions of these libraries are installed per the SPFX version you are currently using ie. SPFX v1.11 or v1.12 etc. Just run npm ls <packagename> to get a breakdown, or check your package.json file.

How to Override Meteor Core Packages in a Project?

For a Meteor project I want to make changes to a Meteor Core library file.
Is this possible and if so, how?
So far I've tried just copying the files into my project directory hoping that the respective Objects are just overwritten from the originals but the problem herewith was that dependent functions or variables were only defined locally.
Then I tried to git clone them into the project's packages directory like you would do with a community package, but that didn't function either since the clone command failed (fatal: repository ... not found) and also the package is not explicitly called in the .meteor/packages file.
Any idea?
Meteor allows having local packages in a project, including ones that override existing (community or core) packages.
While overriding a community package locally often simply requires cloning (or extracting or adding as submodule) the GitHub repository into the /packages folder, core packages currently live inside sub-directories of the main meteor/meteor repository, which makes cloning them trickier.
Overriding a core package may require you to manually apply changes to the package as Meteor or the package update (as Meteor used to be dependent on specific package versions).
Therefore, before taking such step, make sure that you actually need to do it.
Make sure that you cannot you make your changes using local files or your own local package (e.g, by wrapping or replacing a function or monkey-patching it).
There are a few approaches that I used in order to override a core package.
Clone the entire repository and link the directories
This is useful if you want to contribute your changes to the project. You should probably fork the repository and clone your own fork.
Clone the meteor repository:
git clone https://github.com/meteor/meteor.git
or
git clone git#github.com:<username>/meteor.git if you forked it
Link the package directory (in your project's packages directory)
ln -s ../../(...)/meteor/packages/
You can checkout the desired branch/commit and copy them to the local packages directory instead, of course.
Statically download only the package directory
There is a neat trick that allows you to download a given directory from GitHub using svn.
This is obtained by issuing:
svn export https://github.com/meteor/meteor/[trunk|branches/]/packages/
for example:
cloning ddp-client from the devel branch:
svn export https://github.com/meteor/meteor/branches/devel/packages/ddp-client
or from the master branch:
svn export https://github.com/meteor/meteor/trunk/packages/ddp-client
Notes:
As mentioned earlier, you may need to manually apply changes if you update Meteor.
Don't forget to add the package to the project (meteor add <package>) if you haven't already.
Meteor is expected to switch to NPM at some point (possibly in Meteor v1.5), so make sure to use the methods specified in this answer only for meteor's own packaging system.

How to include bower component in a web page

I'm starting with bower and followed this tutorial at first. I have no problems with installing a package, but with how to use it in a static web page.
I could obviously do something like:
<script src="bower_components/module_name/module.js"></script>
for each the components I need, but it seems to me not the good way to do. So I think I am missing something which could link the page generation to my bower components.
May be there a bower component which could help me to include all packages in a bower_components directory.
That is one way to do it but I usually use bower in conjunction with other build tools, like grunt or gulp. Then you can use a task, like grunt-bower-task, to copy only the necessary files to a directory of your choosing.
If you are feeling really ambitious, you could leverage the bower api to roll your own build solution that extracts the "main" files into your project.
Another thing to be aware of, is that not every dependency you will want to include will implement bower's configuration properly (example: missing main attribute or bower.json file). There will also be those projects that require you to include assets (fonts, images, etc.), which bower doesn't currently solve for. In these cases, you will need to come up with a way to move the files around. I always end up having to use something like grunt-contrib-copy to get everything in it's place.

How to edit a package with atmospherejs.com in meteor.js?

To install the package with the atmosphere in meteor.js sufficient to use a single command. But let us assume that there is a need to edit a specific package for themselves. Now I needed to translate into another language package accounts-ui-bootstrap. Package code is in the appropriate folder in the directory .meteor. Everything works as it should, but after restarting the application server, all changes are rolled back to its original state. What should I do?
Just add a new JS or CSS file on your public/server folder depends the case, and overwrite it

Bundler for javascript, or how to source control external javascript files

I am in the process of converting an existing Rails 3.1 app I made for a client into a Backbone.js app with the Rails app only as a backend server extension. This is only a personal project of mine, to learn more about Backbone.js.
While setting up Backbone.js (using Backbone-on-Rails), I noticed I have some dependencies (like backbone-forms) that come from external sources and are frequently updated.
I've grown accustomed to using Bundler to manage my Ruby gems, but I haven't found anything similar for JavaScript files. I'm wondering if there is any way to do the same for Javascript (and possibly css) files.
Basically I can see three possibilities to solve this issue:
Simply write down all the sources for each JS file and check these sources from time to time to see what has changed.
Use some kind of existing "Bundler for Javascript" type of tool, I've been looking for something like this but have yet to find anything (good).
Since most of these JS files will be coming from Git anyway, use Git to get the files directly and use checkout to get the latest version from time to time.
I prefer the last option, but was hoping on some more input from other people who have gone this route or preferred some other way to tackle this issue (or is this even an issue?).
I figure the Git way seems easy, but I am not quite sure yet how I could make this work nicely with Rails 3.1 and Sprockets. I guess I'd try to checkout a single file using Git and have it be cloned in a directory that is accessible to Sprockets, but I haven't tried this yet.
Any thoughts?
You don't mention it in your alternatives, but ideally you should use something like Maven to manage your dependencies. Unfortunately, there are no public repositories for javascript files. This discussion lists some other options which might be of help to you: JQuery Availability on Maven Repositories
For now I've settled on using the Git solution combined with some guard-shell magic.
The steps I follow:
Create a dependencies directory somewhere on your local drive
Clone the repositories with javascript (or css) files you want to use in the app
Set up a custom guard-shell command to do the following:
group 'dependencies' do
guard 'shell' do
dependencies = '~/path/to/dependencies/'
watch(%r{backbone-forms/src/(backbone\-forms\.js)}) {|m| `cp #{dependencies + m[0]} vendor/assets/javascripts/#{m[1]}` }
end
end
Place the Guardfile at the root of the app directory
It takes some time to set things up, but after that, when you have the Guard running, and you pull changes into your dependencies, the required files are automatically copied to your application directory, which are then part of your repository.
It seems to work great, you need to do some work for each new file you want to include in the asset pipeline, but all that is required is cloning the repository in your dependencies directory and adding a single line to your Guardfile, for example for the backbone-form css:
watch(%r{backbone-forms/src/(backbone\-forms\.css)}) {|m| `cp #{dependencies + m[0]} vendor/assets/stylesheets/#{m[1]}` }
Also, the reason I added this Guard to a group is because I keep my dependencies outside the main application directory, which means guard normally doesn't check my dependencies directory. To make this work, I start up my main Guard processes using bundle exec guard -g main and use bundle exec guard -w ~/path/to/dependencies -g dependencies in a new terminal window/tab to specify the -w(atchdir).

Categories

Resources