Managing 3rd party JavaScript libraries in WebStorm under source control - javascript

I am a newbie in WebStorm. I created a TypeScript project (empty project with enabled TypeScript transpiler) and added index.html with links to my scripts.
I want to add 3rd party JavaScript libraries with TypeScript declaration files (jQuery, Knockout, Snap.svg, etc), but with next requirements:
I don't want to add js libraries to my source control.
I want to have my sources in the maximum "compilable" state (minimum manipulation after git checkout).
Local sources (in project/external or project/libraries folder) - not all libraries have CDN.
In my fantasy it's works like a Nuget works with dll packages in Visual Studio.

You could use bower or npm.
They are package managers and you can use it regardless of your IDE. Adding and removing a third party library is dead easy by adding/removing a line in bower.json/package.json for bower/npm respectively.
Here's two links which could help you to learn bower.
https://css-tricks.com/whats-great-bower/
https://www.codementor.io/bower/tutorial/beginner-tutorial-getting-started-bower-package-manager

Related

How do I develop a plugin for a library when including it as a peerDependency gives me no concrete implementation to use?

The Requirements:
I am developing a plugin for popularLibrary.js. The plugin:
Will not work, at all, if popularLibrary.js is not present
Works with v1.x.x of popularLibrary.js
Must work if it's included as a dependency in a project that uses popularLibrary.js
Must work if it's included as a packaged source alongside popularLibrary.js
In example:
<script src="https://some-cdn.com/popularLibrary.js"></script>
<script src="https://some-cdn.com/myMagicalPlugin.js"></script>
The Problems:
When I set popularLibrary.js as a peerDependency, it is no longer downloaded on npm install. How do I continue to develop my plugin when it needs to import and utilize functionality that exists in popularLibrary.js?
Not everyone uses a build step. If someone adds the minified sources for popularLibrary.js and myMagicalPlugin.js, how does that peerDependency resolve? Do I need to do anything extra/special in either library to support this scenario?
It's been a while since I originally asked this. I ultimately added that same peerDependency as a devDependency, as it's needed to develop and test the application.
Ideally, you program to some contract/interface to decouple the plugin from the primary library as much as possible. In a more concrete example, I have two WebPack scripts.
Script 1: Bundles the library and uses excludes key for any direct dependencies on the primary library (should be avoided if you can help it, ie. Decoupled)
Script 2: For a dev application, uses the primary library, and imports the plugin from source. Used with webpack-dev-server for development/testing
You can use WebPackBundleAnalyzer to make sure you're not accidentally bundling peerDeps

What's the recommended way to add Javascript libraries to an Asp.Net Core 2 project?

I'm developing a Asp.Net Core 2 project and I want add some Javascript libraries.
With NuGet is easy:
Search it in NuGet Package Manager
Install
Reference ("using" clause)
I read is not recommended use NuGet as package manager for JavaScript libraries. In my research, and lots of abbreviations latter, I heard of WebPack BUT, I dont know exactly how I do this 3 steps (Search, Install and Reference) on Visual Studio.
By example, lets say I want add a simple library, like the Summernote to a Asp.Net Core 2 Project, how can I do it?

Why do Nuget Javascript packages copy to Scripts folder

When I install e.g. jQuery from Nuget into my VS C# project, jquery.js ends up in my packages folder. This is good, since I don't want to check this file into my source control, since it's not my code and I'm never going to change it - in this context it's the equivalent of a DLL I might get via a different package. So far, so good...
Why, then, does the package installer also copy the file into the project Scripts folder, when surely it would be better to add it to the project as a link to the file in the packages folder, much as a Nuget package DLL would be referenced by the project.
The team have decided to drop support for content files in nuget packages. And they are recommending to use other package managers for client side libraries like npm, bower etc. There is a built in support for them in studio 2015.
One of the reasons is that every time some client package was updated on npm repo one of the guys in microsoft team had to fetch it repackage into nuget and publish.
Check it out!

Import existing javascript site into VS 2015

I have an existing JS web page (using bower, gulp, and algular) that I want to work on in visual studio.
It is set up according to a different folder structure than the one that VS 2015 uses for ASP.NET projects, and I will only be working on the frontend (and there is no ASP.NET on the backend anyway).
Is there a way to import such a thing and develop in VS?
Ideally, I would like to keep all of the conveniences that VS offers for the ASP.NET projects (add bower dependencies via gui, folders for npm, debugger, ability to launch project as website and use the debugger, etc).
Is this possible, and if so how?
create a empty asp.net 5 project
copy the existing folders into the project folder
include the copied folders into the project
I believe the npm, bower json files must be in the root folder to be supported automatically by visual studio 2015.
Also front-end debugging is best done in your favorite browser.

Wordpress plugin dev w/ JS library dependencies? Best long term approach w/ source management?

What is the best approach to Wordpress plugin development when your plugin requires numerous javascript library dependencies?
My example: I'm developing a plugin which makes heavy use of the Backgrid.js library in the plugins administration area. Basic dependencies of Backgrid.js are Backbone.js and Underscore.js. Not a problem because Wordpress includes recent versions of both in recent versions.
The problem? In my Backgrid.js implementation I'm also having to use many of the available extensions, like backgrid-paginator to get pagination working. Many of the extensions are listed here: https://github.com/wyuenho/backgrid/wiki#extensions
My head scratcher is how to best manage this plugin long-term with my source control management. Because I did NOT want to go the long route of downloading each individual extension myself, I simply used Bower (http://bower.io/) within my plugin directory to quickly download these dependencies. This creates a /bower_components directory in my plugin folder where all these dependencies sit.
Now let me preface, I'm pretty new to using Bower. But I'm also pretty new to Wordpress development so I'm not completely up to speed with best practices for this platform. Only working on it due to a client necessitating it.
Of course now my Wordpress plugin is filled with loading scripts such as:
wp_enqueue_script('backgrid-paginator', CUSTOM_PLUGIN__PLUGIN_URL . 'bower_components/backgrid-paginator/backgrid-paginator.min.js', array( 'jquery','backbone','underscore','backgrid', 'backbone-pageable'));
wp_enqueue_style('backgrid-paginator-css', CUSTOM_PLUGIN__PLUGIN_URL . 'bower_components/backgrid-paginator/backgrid-paginator.min.css');
What is the best approach in managing this plugin long term with source control? I'm a little bit of a novice with Bower and everything on Google only talks about using Bower with Wordpress theme development. Nothing speaks to using it with plugin development.
Thinking now, is the best approach to create a Bower bower.json in my plugin directory, which includes all these dependencies? I'll add this bower.json file then to my source control for the plugin, but a README installation requirement will be including that the plugin requires XXX dependencies and the easiest way is to just run: bower install in the plugin's directory to grab everything?
Is that the best approach? I'm trying to consider long term and make whoevers job it will be to take over responsibility for the plugin easier! :)
To my knowledge WordPress has no real standard for managing JavaScript and CSS dependencies outside of the enqueuing them in the right order.
Using Bower for managing the dependencies is definitely a good idea. It will keep your repo clean of vendor files and make it easy to update libraries later on.
If you want to make your life a little bit easier, you can also look into Grunt JS or Gulp JS which are build tools. You can use these to compress, uglify, etc all your JavaScript and CSS files into distributable items (e.g. all.min.js & all.min.css). This will make it easier to add/remove libraries.
Using these will also keep your enqueue statements cleaner.

Categories

Resources